Image Stack Effect using CSS Pseudo Elements

byCodingFlicks -October 02, 2020

0

Hello friends, today, in this project, I will share another simple snippet based on how to make an Image Stack Effect using CSS Pseudo Elements. Previously I have shared a snippet about 3D text CSS animation on hover. Check that out if you haven't already.

In the HTML markup, I have taken a div element named 'wrapper,' which will act as a container of the features. Then, I have created two divs and position them side by side using the CSS float property. The first div element named 'img-area' will contain an image, and the second div element named 'text-content' will have a heading text and some random dummy text.

You may also like:

First, I have given the 'img-area' div element width and height of 400px and gave relative position value for the image stack effect. Then I provided a white 10px border and a box-shadow effect. After that, I used CSS pseudo-elements before and after for the 'img-area' div element and styled them. For the before pseudo-element, I gave it a position absolute value and gave it a background color. Using the CSS transform property, I rotated the element by 5 degrees and gave the same box-shadow effect like the main div element. After that, I pushed the pseudo-element behind the main div by giving it minus z-index value. The styling for the after pseudo-element will be almost the same apart from background-color, CSS transform rotates, top, and left value. Instead of explaining any further, I am providing you the source code to play around with code by yourself.

To make this snippet, you have to create two files. One is HTML, and the other one is CSS. After that, link the CSS file to your HTML file. Now copy-paste the code below to your files, save and run it to your browser.

HTML

<div class="wrapper">
<div class="img-area">
<img src="https://i.postimg.cc/fTPmbSXv/11.jpg" alt="">
</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>

CSS

body{
background: darkcyan;
}
.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;
}

I hope it helps. For future posts, please follow our social media profiles and stay connected. Thank you for visiting the blog.

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