Pure CSS to achieve the effect of picture blinds display example

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

Recommend

MySQL optimization connection optimization

In the article MySQL Optimization: Cache Optimiza...

Detailed explanation of basic interaction of javascript

Table of contents 1. How to obtain elements Get i...

Docker link realizes container interconnection

Table of contents 1.1. Network access between con...

Solution to the problem that the text is on the lower left and cannot be resized when the textarea is laid out

Two small problems, but they bothered me for a lon...

Vue elementUI implements tree structure table and lazy loading

Table of contents 1. Achieve results 2. Backend i...

Deep understanding of JavaScript syntax and code structure

Table of contents Overview Functionality and read...

Analysis of HTTP interface testing process based on postman

I accidentally discovered a great artificial inte...

How to run commands on a remote Linux system via SSH

Sometimes we may need to run some commands on a r...

A brief analysis of JS original value and reference value issues

Primitive values ​​-> primitive types Number S...

Vue3+TypeScript encapsulates axios and implements request calls

No way, no way, it turns out that there are peopl...

Use of Linux file command

1. Command Introduction The file command is used ...

Use MySQL to open/modify port 3306 and open access permissions in Ubuntu/Linux environment

Operating system: Ubuntu 17.04 64-bit MySQL versi...

Detailed explanation of Vue filter implementation and application scenarios

1. Brief Introduction Vue.js allows you to define...

10 reasons why Linux is becoming more and more popular

Linux has been loved by more and more users. Why ...

Pitfalls and solutions encountered in MySQL timestamp comparison query

Table of contents Pitfalls encountered in timesta...