<div class="box">
<img src="b5img/1.jpg" alt="">
<div class="overlay">
<div class="icon">
<i class="ri-facebook-fill"></i>
<i class="ri-whatsapp-line"></i>
<i class="ri-instagram-line"></i>
</div>
</div>
</div>
.box {
width: 25vw;
position: relative;
overflow: hidden; /* Ensure the overlay stays within the box */
}
.box img {
width: 100%; /* Use 100% width to fill the container */
}
.overlay {
position: absolute;
bottom: 20px;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
opacity: 0;
transition: all 1s ease;
transform: translateY(10px);
}
.icon i{
background-color: white;
color: black;
font-size: 22px;
padding: 10px;
border-radius: 2px;
cursor: pointer;
}
.box:hover .overlay{
opacity: 1;
transform: translateY(-100%);
}
Comments
Post a Comment