How to realize the stacking effect of photos by CSS
This article mainly introduces CSS how to achieve photo stacking effect, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.
Steps
1. Initial index.html
To create the first photo, the top one. We just need to add a div that contains the img of the photo. That's it, and the rest of the effect is achieved through CSS. Make sure that the class of div is stackone.
Photo Stack
* {
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)
}
The initial effect is as follows:
2.The First Pseudo Element
Now let's add a layer of film. The effect we want is that the bottom picture looks as if it is under the top photo. We can use the pseudo-class of CSS: before.
.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)
}
At this time, the effect is very different.
3. Perfect before
This is not the effect we want. How to fix it? We need to add some positioning to: before, and then set z-index to put it at the back.
.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 there is a clue.
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)
}
Thank you for reading this article carefully. I hope the article "how to achieve photo stacking effect with CSS" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and follow the industry information channel. More related knowledge is waiting for you to learn!
