Image Stack Effect using CSS Pseudo Elements

byCodingFlicks -October 02, 2020

0

Image Stack Effect using CSS Pseudo Elements

Image stack effect is a visual styling technique used in the website or web design process to visually display a particular image. We know that, in this competitive environment, it is very difficult to grab the attention of the visitors. These CSS tricks or CSS effects are one of the many ways to make your website aesthetically pleasing to your visitors. In this blog post, we will share a CSS snippet on image stack effect using CSS pseudo-elements. For your convenience, we have included a video tutorial below. Please watch it before collecting the source code of this CSS image effect snippet.

Video Tutorial:

We hope you have watched the full video tutorial on Image Stack Effect using CSS Pseudo Elements. Developers use this technique to simulate the depth of a particular image, just like a stack of pictures or cards. Its main function is to add visual interest and artistic flair to standard image presentations without the help of JavaScript or other frameworks. We achieve this by using image layers by using CSS ::before and ::after pseudo-elements, which act as additional elements behind the main image. After that, we create an illusion of depth and stacking using transform, z-index, or box-shadow. To set it apart from others, we have used the CSS transform property to rotate each layer by 4 degrees. These CSS image effects or image layers are mostly used to showcase creative flair in portfolio websites, image-heavy blogs, or fashion websites, photography or design galleries, hero sections of landing pages, etc.

You May Also Like:

Image Stack Effect using CSS [ Source Code ]:

To create this Image Stack Effect using CSS snippets, you need to create an HTML and a CSS file. Then, you need to copy the code from the code box below and paste it into your files. If you want, you can download the source code by clicking the download button below this blog post.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- codingflicks.com -->	
<head>
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Stack Effect using CSS Pseudo Elements</title>
	<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
		<div class="img-area">
			<img alt="" src="1.jpg">
		</div>
		<div class="text-content">
			<h2>John Doe</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus ipsum laborum pariatur autem optio. Aut, reprehenderit quisquam neque tempora repudiandae tempore, optio adipisci ullam architecto cumque quibusdam magnam facere! Quod repellendus labore natus ut? Sint, perspiciatis consequuntur dolores doloribus assumenda quos sapiente. Delectus quisquam provident debitis ipsam. Aspernatur numquam delectus voluptatem sapiente itaque rerum expedita explicabo, veritatis consectetur maxime rem earum, totam quod similique, ratione dignissimos voluptates qui. Qui tenetur illum voluptatem quibusdam in necessitatibus atque iste provident unde fugit!</p>
		</div>
	</div>
</body>
</html>

ADD CSS:

body {
	background: deepskyblue; 
}
.wrapper {
	width: 1170px;
	margin: 6% auto;
}
.img-area {
	float: left;
}
.text-content {
	width: 57%;
	float: right;
}
.text-content h2 {
	font-size: 65px;
	margin: 0;
	font-family: roboto;
	text-transform: uppercase;
	color: #fff;
}
.text-content p {
	font-size: 18px;
	color: #ddd;
	font-family: roboto;
	line-height: 1.9;
}
.img-area {
	height: 400px;
	width: 400px;
	position: relative;
	-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	border: 10px solid #fff;
}
.img-area:before {
	content: '';
	height: 400px;
	width: 400px;
	background: #eff4de;
	z-index: -1;
	border: 10px solid #fff;
	position: absolute;
	top: 0;
	left: -10px;
	-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	-webkit-transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
	transform: rotate(-5deg);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.img-area:after {
	content: '';
	position: absolute;
	background: #768590;
	height: 400px;
	width: 400px;
	border: 10px solid #fff;
	top: 5px;
	left: 0;
	-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	-webkit-transform: rotate(4deg);
	-ms-transform: rotate(4deg);
	transform: rotate(4deg);
	z-index: -1;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

To enhance visual styling using minimal code, this CSS trick or CSS effect is a must. We don't need any additional image files or scripts to get this effect. It improves the user experience and doesn't affect the loading time of the website. This lightweight trick will add extra sophistication and elegance to a still image. We hope you have collected this source code. To learn more, click on the "Load More" button on our homepage. Thanks for watching.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.