Stacked polaroid effect with :before and :after pseudo-class selectors



I recently figured it would be cool to make an image placeholder that looks like it’s on top of other images. I decided to fiddle around with the :before and :after pseudo-class selectors.

I quickly figured out that you apparently can’t use these classes on the img tag itself. You have to use them on a wrapper element. The final result looks like the demo below

See the Pen Stacked image effect using :before and :after by Creative Punch (@CreativePunch) on CodePen.

Since we can’t use :before and :after on the img tag, we style the img alongside its container.

The resulting code looks like this:



#img-container:before,
#img-container:after,
#img-container img.stacked {
  display: block;
  border: 10px solid white;
  border-bottom: 20px solid white;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
}

We also need to make sure that our container div has the width and height of the image and that the :before and :after pseudo-class inherit this. We will also set a z-index and relative position. Placing them behind the main image.

#img-container {
  margin: 50px auto;
  width: 250px;
  height: 300px;
  position: relative;
}

#img-container:before, #img-container:after {
  content: "";
  width: inherit;
  height: inherit;
  background: #000;
  position: absolute;
  top: 0;
}

#img-container:before {
  transform: rotateZ(-3deg);
  z-index: -1;
}

#img-container:after {
  transform: rotateZ(-7deg);
  z-index: -2;
}

We also rotated the underlying polaroids by -3 and -7 degrees. Giving this image the appearance of laying on top of other images!

Share the knowledge!
Share on Facebook0Tweet about this on Twitter0Share on Google+1Share on StumbleUpon4Share on Reddit0Share on LinkedIn0Share on TumblrBuffer this pageDigg this

Comments

You may also like...

Stay updated
Subscribe!