CSS realizes the folding effect of image mouse hover
1. Implementation points
Folding is done by multiple block-level elements;
The picture is presented as a background picture;
Set the same background image for each block-level element, and control the displayed area through background-position (similar to Sprite);
Realize the folding effect through the ransform attribute;
The size of the entire package div is the original size of the image. If you change the size, you need to adjust the background-size and other properties to adjust the background image size
2. Effect display
3. Source code
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< title> hover- folder< / title>
< style>
html,
body,
ul,
li {
margin: 0 ;
padding: 0
}
ul {
list- style: none;
display: block;
}
body {
width: 100 % ;
height: 100 vh;
}
. container {
width: 100 % ;
height: 100 % ;
display: flex;
justify- content: center;
align- items: center;
transform: scale ( 0.5 ) ;
}
. wrap {
box- shadow: 0 2 px 12 px 0 rgba ( 0 , 0 , 0 , .5 ) ;
width: 1280 px;
height: 854 px;
font- size: 0 ;
line- height: 0 ;
position: relative;
}
. image {
cursor: pointer;
}
. abs- wrap {
height: 100 % ;
width: 100 % ;
z- index: 10 ;
}
. abs- wrap: hover> . abs: nth- child ( 2 ) {
transform: matrix ( 0.8 , - 0.2 , 0 , 1 , - 1 , 0 ) ;
}
. abs- wrap: hover> . abs: nth- child ( 3 ) {
transform: matrix ( 0.8 , 0.2 , 0 , 1 , - 53 , - 50 ) ;
}
. abs- wrap: hover> . abs: nth- child ( 4 ) {
transform: matrix ( 0.8 , - 0.2 , 0 , 1 , - 105 , 0 ) ;
}
. abs- wrap: hover> . abs: nth- child ( 5 ) {
transform: matrix ( 0.8 , 0.2 , 0 , 1 , - 157 , - 50 ) ;
}
. abs {
transform- style: preserve- 3 d;
transform- origin: left center;
transition: .4 s ease- in - out;
width: 20 % ;
height: 100 % ;
display: inline- block;
background- size: 100 % ;
background: url ( 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600577868615&di=d2979a54604ecb409e3329527d0220fa&imgtype=0&src=http%3A%2F%2Ft9.baidu.com%2Fit%2Fu%3D29311073%2C358824429%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D1280%26h%3D854' ) ;
}
. abs: nth- child ( 1 ) {
background- position: 0 % 0 % ;
}
. abs: nth- child ( 2 ) {
background- position: 25 % 0 % ;
}
. abs: nth- child ( 3 ) {
background- position: 50 % 0 % ;
}
. abs: nth- child ( 4 ) {
background- position: 75 % 0 % ;
}
. abs: nth- child ( 5 ) {
background- position: 100 % 0 % ;
}
< / style>
< / head>
< body>
< div class = "container" >
< div class = "wrap" >
< ul class = "abs-wrap" >
< li class = "abs" > < / li>
< li class = "abs" > < / li>
< li class = "abs" > < / li>
< li class = "abs" > < / li>
< li class = "abs" > < / li>
< / ul>
< / div>
< / div>
< / body>
< / html>