Skip to main content

<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

Popular posts from this blog

javascript full guid  JavaScript is a dynamically typed language. Because data type will automatically assigned at the time of compilation or code execution. Jb b ap function return kra gha to variable ma store kra sakty ha sirf console log say ni kr sakty return //datatypes are based on memory allocation Primitive datatypes ->  call by value (string , number , boolean ,null,undefined, BigInt , symbol) -> Stack memory Reference / Non primitive data types -> call by reference ( array , object , function ) -> heap memory JavaScript is a dynamically typed language . This means that you don ' t need to specify the data type of a variable when you declare it . 01_variables.js const accountId = 144553 let accountEmail = " hitesh@google.com " var accountPassword = " 12345 " accountCity = " Jaipur " let accountState ; // accountId = 2 // not allowed accountEmail = " hc@hc.com " accountPassword = ...
Post a Comment
Read more
<! DOCTYPE html > < html lang =" en ">   < head >     < meta charset =" UTF-8 " />     < meta name =" viewport " content =" width=device-width, initial-scale=1.0 " />     < title > Document </ title >     < link href =" https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css " rel =" stylesheet ">     < link rel =" stylesheet " href =" style.css " />   </ head >   < body class =" overflow-x-hidden ">     < nav class =" flex justify-between items-center mt-5 px-5 md:px-16 ">       < a class =" flex items-center gap-2 " href =" # ">< img src =" https://demo.themesberg.com/landwind/images/logo.svg " alt ="">< h4 class =" font-bold text-[18px] "> Landwind </ h4 ></ a >       < div >         < ul class =" fle...
Post a Comment
Read more