@seangray-dev
Posted
Hey Hanzala,
Similarly to a previous comment. Here is some of my CSS for this challenge:
- Setting the parent element to position relative:
.card-top {
border-radius: 15px;
overflow: hidden;
position: relative;
}
.card-top img {
width: 100%;
display: block;
}
- And then the overlay image to take up the entire space of it's parent element while hiding it:
.img-overlay {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: hsla(178, 100%, 50%, 0.3);
display: none;
}
.img-overlay img {
position: absolute;
width: 50px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
- And then to show it upon hovering:
.card-top:hover .img-overlay {
display: block;
}
Hopefully this helps. Keep it up! 😁
Marked as helpful