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
VMware virtual machine installation CentOS 8 (1905) system tutorial diagram
The world-famous virtual machine software VMware-...
Vue project implements graphic verification code
This article example shares the specific code of ...
How to use crontab to add scheduled tasks in Linux
Preface The Linux system is controlled by the sys...
Tomcat9 download, installation and configuration + detailed tutorial on integrating into eclipse
tomcat official website tomcat is equivalent to a...
In-depth explanation of the various methods and advantages and disadvantages of JavaScript inheritance
Table of contents 1. Prototype chain inheritance ...
MySQL learning record: bloody incident caused by KEY partition
Demand background Part of the data in the busines...
Introduction to MySQL method of deleting table data with foreign key constraints
When deleting a table or a piece of data in MySQL...
CSS3 achieves cool 3D rotation perspective effect
CSS3 achieves cool 3D rotation perspective 3D ani...
JavaScript event capture bubbling and capture details
Table of contents 1. Event Flow 1. Concept 2. DOM...
MySQL users and permissions and examples of how to crack the root password
MySQL Users and Privileges In MySQL, there is a d...
MySQL index optimization: paging exploration detailed introduction
Table of contents MySQL Index Optimization Paging...
After reading the introduction of CSS box model, you will not be confused
The property names often heard in web design: con...
Summary of Creating and Using Array Methods in Bash Scripts
Defining an array in Bash There are two ways to c...
Detailed explanation of Linux host name modification command
Linux change hostname command 1. If you only need...
A brief discussion on HTML table tags
Mainly discuss its structure and some important pr...