:root{--hover-bgr:hsla(210,100%,56%,1)}.image_container{position:relative;width:95%;max-width:500px;height:min(70vw,300px);cursor:pointer}img{width:100%;height:100%;object-fit:cover;border:1px solid #ccc}.image_container:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:var(--hover-bgr);transform:scale(0);transition:all 800ms linear;transform-origin:0 50%;z-index:2;opacity:.3}.image_container:hover:before{transform:scale(1)}span{position:absolute;color:#fff;opacity:0;transition:all 800ms linear;z-index:3}.title{font-size:2rem;left:25%;top:45%}.description{font-size:1rem;left:25%;top:60%;width:50%}.image_container:hover span{opacity:1}.line{left:0;top:0;position:absolute;background:#fff;transition:all 800ms linear}.top{width:3px;height:0;left:20%}.image_container:hover .top{height:100%}.left{width:0;height:3px;top:95%}.image_container:hover .left{width:100%}@media(max-width:424px){.title{font-size:1.5rem;left:25%;top:50%}.description{font-size:.8rem;left:25%;top:65%;width:50%}