How to Create Stack Image using CSS3

stackedimg
Credit to Morshedi

 

One of my project have a design on lying of image to one another. First I want to do it as background image but I feel there is a way creating it using our love CSS3 and found some good tutorial.

Now I’m going to show you how to create a stack image using CSS3 pseudo :before and :after.

Step 1

First we need to create our HTML

 Step 2

Create our CSS and add the below codes.

The above code generate a illusion of image lying on each other using the box-shadow property.

You can also create other style like below.

Let us add this style also to reset from transform when hovering.

I hope you can now create your own stacked image using CSS3

 

Source: inspectelement.com