Example code for implementing photo stacking effect with CSS

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

Recommend

Detailed tutorial on how to connect to a remote server Docker to deploy a Spring Boot project in IDEA

Before you begin Have a cloud server, mine is Ten...

Diagram of the Hyperledger Fabric 1.4 environment construction process under Windows 10

ContentsHyperledger fabric1.4 environment setup u...

Network configuration of Host Only+NAT mode under VirtualBox

The network configuration of Host Only+NAT mode u...

How to install docker on ubuntu20.04 LTS

Zero: Uninstall old version Older versions of Doc...

HTML form application includes the use of check boxes and radio buttons

Including the use of check boxes and radio buttons...

Put frameset in body through iframe

Because frameset and body are on the same level, y...

jQuery plugin to implement stacked menu

A jQuery plugin every day - stacked menu, for you...

JS Decorator Pattern and TypeScript Decorators

Table of contents Introduction to the Decorator P...

WeChat Mini Programs Achieve Seamless Scrolling

This article example shares the specific code for...

Six ways to increase your website speed

1. Replace your .js library file address with the...

JavaScript canvas to achieve mirror image effect

This article shares the specific code for JavaScr...

css3 flex layout justify-content:space-between the last line is aligned to the left

When using justify-content:space-between layout, ...

Detailed explanation of the idea of ​​distributed lock in MySQL with the help of DB

Preface Whether it is a stand-alone lock or a dis...

Handtrack.js library for real-time monitoring of hand movements (recommended)

【Introduction】: Handtrack.js is a prototype libra...

MySQL conditional query and or usage and priority example analysis

This article uses examples to illustrate the usag...