Pure CSS picture blinds
First, let’s take a look at the
main idea of the finished effect : in fact, this blind still uses a blinding method. After we move the mouse up, the pictures are expanded. In fact, these pictures did not move at all in the same place, it is just that we put these pictures. In a list, overlap each other, and change the width of the list as the mouse moves.
Step 1: Build a shutter frame
html code:
<div class="container">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
css code:
*{
margin: 0;
padding: 0;
}
.container{
margin: 100px auto;
border: 2px solid #568bc7;
width: 800px;
height: 300px;
}
.container ul{
display: flex;
}
.container li{
width: 160px;
height: 300px;
list-style: none;
border-left: 1px solid #194b8d;
}
.container li img{
display: block;
width: 800px;
height: 300px;
}
Need to pay attention to: The li here may need to manually calculate the width of the equal division . Although the flexible box can be used to achieve automatic division, but after I added hover later, I found that there will be BUGs. You can try it, and I will not use the flexible box here.
Now get the following frame:
Step 2: Insert a picture and use hover to make special effects
I have inserted five oil paintings here
Here we can find that the picture exceeds the scope of our container
At this time, we add in the outer container and make an overflow hidden
overflow: hidden;
Such a shutter has a scale.
How to make the picture move like a demo GIF?
A piece of core code is involved here
.container ul:hover li{
width: 40px;
}
.container ul li:hover{
width: 600px;
}
This demo is actually right: an exercise in the flexible use of the hover attribute.
First of all, note that the order of the two lines of code cannot be changed.
First, when the mouse is moved into the large container of ul, we must first make the width of li smaller, and then trigger it. One line of hover, when moving into each li, make the width of li bigger
The third step: detailed processing
After finishing the above, we see that the whole process is very blunt.
Here you can add transition attributes to make the changes smoother, and at the same time add a little shadow effect to the left border of each li to make it look more three-dimensional
box-shadow: 0 0 25px #000;
transition: all 0.5s;
Finally it's done
Here is the complete code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
margin: 100px auto;
border: 2px solid #568bc7;
width: 800px;
height: 300px;
overflow: hidden;
}
.container ul{
display: flex;
}
.container li{
width: 160px;
height: 300px;
list-style: none;
border-left: 1px solid #194b8d;
box-shadow: 0 0 25px #000;
transition: all 0.5s;
}
.container li img{
display: block;
width: 800px;
height: 300px;
}
.container ul:hover li{
width: 40px;
}
.container ul li:hover{
width: 600px;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li><img src="./img/tq1.jpg" alt=""></li>
<li><img src="./img/tq2.jpg" alt=""></li>
<li><img src="./img/tq3.jpg" alt=""></li>
<li><img src="./img/tq4.jpg" alt=""></li>
<li><img src="./img/tq5.jpg" alt=""></li>
</ul>
</div>
</body>
</html>