how to Scroll image on hover in a div?-CodePudding

Hi I am trying to create an effect somewhat like that https://cuberto.com/contacts/ (Hover on the silver-bordered buttons Ex: site from scratch, UX/UI Design, or click on the menu on the top right side and hover on menu items) I am trying to create the same effect but with the images Like whenever I hover the Images the image have to go up and come from beneath (might be the second image) I tried to do that but didn't get the right way how to implement this thing. I searched all over the internet but didn't get the answer not even from Youtube and here at StackOverflow so I wanna know how to do this thing correctly and have any idea what this effect is called?

Any kind of help is highly appreciated.

.wrapper{
  position:relative;
  overflow:hidden;
  height:300px;
 
  
}
.wrapper img{
  position:absolute; 
  transition:.5s ease-in-out;
  cursor:pointer;
}
.wrapper .image-front:hover{
    transform:translateY(-400px);
  transition:.5s ease-in-out;
}
/* .image-back{
    transform:translateY(200px);
  
} */

.wrapper .image-back:hover .wrapper {
    transform:translateY(200px);
  transition:.5s ease-in-out;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <div >
   <img src="https://images.unsplash.com/photo-1648737119359-510d4f551382?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwyMXx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60" alt="" >
    <img src="https://images.unsplash.com/photo-1648737119359-510d4f551382?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwyMXx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60" alt="" >
  </div>
  
</body>
</html>

CodePudding user response：

Move the :hover to the parent element.

I've also adjusted the wrapper height to match the height of the images and used this height within the translateYs.

.wrapper{
  position:relative;
  overflow:hidden;
  height:333px;   
}

.wrapper img{
  position:absolute; 
  transition:.5s ease-in-out;
  cursor:pointer;
}

.wrapper:hover .image-front{
  transform:translateY(-333px);
  transition:.5s ease-in-out;
}

.image-back{
    transform:translateY(333px);      
}

.wrapper:hover .image-back {
  transform:translateY(0);
  transition:.5s ease-in-out;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <div >
   <img src="https://images.unsplash.com/photo-1648737119359-510d4f551382?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwyMXx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60" alt="" >
    <img src="https://images.unsplash.com/photo-1648737119359-510d4f551382?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwyMXx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60" alt="" >
  </div>
  
</body>
</html>

CodePudding user response：

Go to the page you are referring to and right click and hit inspect what you are trying to look at replicating the style. For example I did it to the site from scratch up and got the below in the browser console. Take a look at the style or classes attributed to what you are looking for.

enter image description here