<div class="image_container">
<img src="https://res.cloudinary.com/djix6uusx/image/upload/v1659354179/humming_bird_bzcaf5.jpg" />
<span class="title">Humming Bird</span>
<span class="description"
>They are the only birds that can fly backwards and are capable of
hovering for a period of time during flight.</span
>
<span class="line top"></span>
<span class="line left"></span>
</div>
*,
:before,
:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.image_container {
position: relative;
width: 95%;
max-width: 500px;
height: min(70vw, 300px);
cursor: pointer;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
.image_container:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: hsl(271, 76%, 53%);
transform: scale(0);
transition: all 800ms linear;
transform-origin: 0 50%;
z-index: 2;
opacity: 0.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: 50%;
}
.description {
font-size: 1rem;
left: 25%;
top: 65%;
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: 0.8rem;
left: 25%;
top: 65%;
width: 50%;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.