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 |
<<: Discuss the development trend of Baidu Encyclopedia UI
>>: Detailed explanation of Nginx process management and reloading principles
Recommend
Sample code for implementing music player with native JS
This article mainly introduces the sample code of...
Detailed tutorial on installing Python 3.6.6 from scratch on CentOS 7.5
ps: The environment is as the title Install possi...
HTML Grammar Encyclopedia_HTML Language Grammar Encyclopedia (Must Read)
Volume Label, Property Name, Description 002 <...
Introduction to ApplicationHost.config (IIS storage configuration area file)
For a newly created website, take ASP.NET MVC5 as...
Detailed explanation of the production principle of jQuery breathing carousel
This article shares the specific process of the j...
Introduction to useRef and useState in JavaScript
Table of contents 1. useState hook 2. useRef hook...
Detailed explanation of the installation and use of Vue-Router
Table of contents Install Basic configuration of ...
Summary of Problems in Installing MySQL 5.7.19 under Linux
The first time I installed MySQL on my virtual ma...
Why should the number of rows in a single MySQL table not exceed 5 million?
Today, let’s discuss an interesting topic: How mu...
Install Windows Server 2019 on VMware Workstation (Graphic Tutorial)
If prompted to enter a key, select [I don’t have ...
Steps to transfer files and folders between two Linux servers
Today I was dealing with the issue of migrating a...
Detailed explanation of Vue plugin
Summarize This article ends here. I hope it can b...
Solution to forgetting mysql database password
You may have set a MySQL password just now, but f...
A brief discussion on the comparison of varchar, char and text in postgresql database
As shown below: name describe character varying(n...
Detailed explanation of installing jdk1.8 and configuring environment variables in a Linux-like environment
The configuration is very simple, but I have to c...