2.9K
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
