Example code for implementing photo stacking effect with CSS

Achieve results

step

1. Initial index.html

To build up the first photo, the one at the top. We just need to add a div that contains the img of the photo. That’s all, the rest of the effects are achieved through CSS. Make sure the div has the class stackone.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Photo Stack</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html,
    body {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .stackone {
      --img-width: 480px;
      --img-height: 320px;
      border: 6px solid #fff;
      float: left;
      height:var(--img-height);
      width: var(--img-width);
      margin: 50px;
      position: relative;
      -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
      -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    }
    .stackone img {
      width: var(--img-width);
    }
  </style>
</head>
<body>
  <div class="stackone">
    <img src="../../../assets/image/landscape-4378548_960_720.jpg">
  </div>
</body>
</html>

The initial effect is as follows:

2. The First Pseudo Element

Now we add a layer of negative. The effect we want is that the bottom image appears to be under the top photo. We can use the CSS pseudo-class: before to achieve this.

.stackone::before {
  content: "";
  height:var(--img-height);
  width: var(--img-width);
  background: #eff4de;
  border: 6px solid #fff;
  -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

The effect is far different now

3. Improve before

This is not the effect we want. How to fix it? We need to add some positioning to the :before and then set the z-index to put it behind.

.stackone::before {
  content: "";
  height:var(--img-height);
  width: var(--img-width);
  background: #eff4de;
  border: 6px solid #fff;

  position: absolute;
  z-index: -1;
  top: 0px;
  left: -10px;

  -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  -moz-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);
  -moz-transform:rotate(-5deg);
  -o-transform: rotate(-5deg);
  -ms-transform:rotate(-5deg);
  transform: rotate(-5deg);
}

The effect is normal at this time, and the initial signs are seen

4. The Second Pseudo Element

.stackone::after {
  content: "";
  height:var(--img-height);
  width: var(--img-width);
  background: lightblue;
  border: 6px solid #fff;
  position: absolute;
  z-index: -1;
  top: 5px;
  left: 0px;
  -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  -moz-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);
  -moz-transform:rotate(4deg);
  -o-transform: rotate(4deg);
  -ms-transform:rotate(4deg);
  transform: rotate(4deg);
}

Finally, it's done, with a sense of hierarchy:

Original description

This article is migrated from my blog "CSS to achieve photo stacking effect" on CSDN at 16:38:48 on December 29, 2014
Source blog reference translated from "Use Pseudo Elements to Create an Image Stack Illusion"
Github project source code

<<: Discuss the development trend of Baidu Encyclopedia UI

>>: Detailed explanation of Nginx process management and reloading principles