Home » 3D image on the hover effect with HTML and CSS

3D image on the hover effect with HTML and CSS

by techmidpoint
3D image on the hover effect with HTML and CSS

3D image on the hover effect with HTML and CSS

Hello friends, welcome to you in techmidpoint tutorial. In this tutorial, I am going to show the 3D image on the hover effect with HTML and CSS. First, you need an image for making the 3D image. When we move the mouse over the image then the hidden layer display automatically with different opacity.

HTML

<!DOCTYPE html>
  <html>
    <head>
      <title>3D imager Hover Css</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <div class="container">
          <img src="img.jpg">
          <img src="img.jpg">
          <img src="img.jpg">
          <img src="img.jpg">
      </div>
    </body>
  </html>

CSS

body
{
  margin:0;
  padding: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffcccc;
 
}
.container
{
  position: relative;
  width: 280px;
  height: 450px;
  margin-top: 150px;
  background: rgba(0,0,0,0);
  transform: rotate(-30deg) skew(25deg) scale(.8);
  transition: 0.5s;
}
.container img
{
  position: absolute;
  width: 100%;
  transition: 0.5s;
  cursor: pointer;
}
.container:hover img:nth-child(4)
{
  transform: translate(160px,-160px);		
  opacity: 1;
}
.container:hover img:nth-child(3)
{
  transform: translate(120px,-120px);		
  opacity: .8;
}
.container:hover img:nth-child(2)
{
  transform: translate(80px,-80px);		
  opacity: .6;
}
.container:hover img:nth-child(1)
{
  transform: translate(40px,-40px);		
  opacity: .4;
}

For More Tutorials Please Click Here

You may also like

Leave a Comment