CSS 3D Layered Image Hover Effects – Stacked Paper Effect

stacked paper effect css

CSS3 has brought a huge change in the field of web design. Today we are going to use CSS transition effects to create a layered 3D CSS animation effect. You will see that how CSS transitions and CSS transform can make things look cool.

stacked paper effect css

We are going to use an image with CSS hover effects and CSS image effects. First of all create an HTML file and give the body tag the following style.

body{

display: flex;

justify-content: center;

align-items: center;

height: 100%;

width: 100%;

}

Now create a div with container class to hold the image. CSS transition effects will be used to get a smooth effect just like animation. Now give the container class the following CSS style.

.container{

position: relative;

width: 360px;

margin-top: 250px;

background: rgba(0, 0, 0, 1);

background-size: cover;

transform: rotate(-20deg) skew(30deg) scale(0.9);

transition: 0.5s;

 

}

Now put the 4 images inside the container class and put the following styles in your css.

.container img{

position:  absolute;

width: 300px;

height: 250px;

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: 0.8;

}

.container:hover img:nth-child(2){

transform: translate(80px, -80px);

opacity: 0.6;

}

.container:hover img:nth-child(1){

transform: translate(40px, -40px);

opacity: 0.4;

}

Here is the HTML code:

<!DOCTYPE html>
<html>
<head>
	<title>3D Layered Effect with CSS3</title>
</head>
<body>
	<div class="container">
		<img src="https://i.imgur.com/YHsghWC.jpg">
		<img src="https://i.imgur.com/YHsghWC.jpg">
		<img src="https://i.imgur.com/YHsghWC.jpg">
		<img src="https://i.imgur.com/YHsghWC.jpg">
	</div>
</body>
</html>

That’s all you need to make a 3D layered effect with CSS. It is very simple and attractive as we are using CSS transitions effects, CSS transforms and CSS transform translate effects. Here is the complete file code with HTML, CSS and the result from JSfiddle.

Comments