Pure CSS to achieve the effect of picture blinds display example

First, let me show you the finished effect

Main idea: In fact, this blinds still uses a kind of sleight of hand. It seems that the picture expands after we move the mouse over it. In fact, these pictures do not move at all. We just put these pictures in a list, superimpose them on each other, and change the width of the list when the mouse moves.

Step One: 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;
        }

Note: The width of the li here may need to be calculated manually. Although the elastic box can be used to achieve automatic equal division, I found a bug after adding hover. You can try it. The elastic box is not used here. Now the following framework is obtained:

Step 2: Insert the picture and use hover to create special effects

I inserted five paintings here

Here we can find that the image exceeds the scope of our container

At this point we add an overflow hidden
overflow: hidden;

Such a blind is of scale. How to make the picture move like the demonstration GIF?
Here is a core code

  .container ul:hover li{
            width: 40px;
        }
    .container ul li:hover{
            width: 600px;
        }

This demo is actually an exercise in the flexible use of the :hover attribute.
First of all, please note that the order of the two lines of code cannot be changed. First, when the mouse moves into the large container of ul, we first make the width of li smaller, and then trigger the hover of the next line. When moving into each li, make the width of li larger.

Step 3: Details

After completing the above, we can see that the whole process is very stiff. Here we can add transition attributes to make the change smoother. 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 full 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>

This is the end of this article about how to achieve image blinds display effect with pure CSS. For more relevant CSS image blinds content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<: What is the function of !-- -- in HTML page style?

>>: Detailed explanation of JavaScript BOM composition and common events

Detailed tutorial on how to automatically install CentOS7.6 using PXE

Pure CSS to achieve the effect of picture blinds display example

Detailed tutorial on how to automatically install CentOS7.6 using PXE

Detailed explanation of MySQL's MERGE storage engine

Specific use of pthread_create in linux to create threads

Summary of Seven Basic XHTML Coding Rules

Practical record of MySQL 5.6 master-slave error reporting

HTML table markup tutorial (14): table header

Linux user script creation/guessing game/network card traffic monitoring introduction

Docker port mapping and external inaccessibility issues

Building an image server with FastDFS under Linux

The MySql 8.0.16 version installation prompts that "UTF8B4" is used instead of "UTF8B3"

Recommend

Nodejs Exploration: In-depth understanding of the principle of single-threaded high concurrency

Best Practices for MySQL Upgrades

Examples of correct use of maps in WeChat mini programs

This article teaches you how to play with CSS combination selectors

JavaScript implements click to change the image shape (transform application)

64-bit CentOs7 source code installation mysql-5.6.35 process sharing

Solution to invalid Nginx cross-domain setting Access-Control-Allow-Origin

WeChat applet wxs date and time processing implementation example

Solve the problem that PhpStorm fails to connect to VirtualBox

MySQL data operation-use of DML statements

How to implement simple data monitoring with JS

Detailed explanation on reasonable settings of MySQL sql_mode

How to call a piece of HTML code together on multiple HTML pages

Method for realizing Internet interconnection by VMware virtual machine bridging

Analysis of common usage examples of MySQL process functions