CSS3 mouse hover transition zoom effect

The following is a picture mouse hover zoom effect written in pure CSS. In fact, the basic principle is very simple. We can find that they all do some interactive effects on pictures when visiting some websites. Of course, there are many ways to achieve picture transition effects, such as using JQuery or some third-party js animation libraries. This example only shows the basic effects and does not summarize the knowledge used.
The code is as follows:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script></script>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            background-color: rgb(251, 163, 163);
        }
        /* Bar chart style*/
        .containlist {
            position: relative;
         
            margin-top: 100px;
            margin-left:10%;

            height: 100px;
            width: 80%;

            overflow: hidden;
            border-radius: 30px;
            box-shadow: rgb(54, 53, 53) 10px 10px 10px;
         

        }
        .list {
           
            position: absolute;
            width: 100%;
            height: 100%;

            background-position: center;
            background-size: cover;

            border-radius: 30px;
            transition: 0.5s;
            
            color: white;
            font-weight: bold;
            text-align: center;
        }
       
        .list:hover {
            transform: scale(1.2);
        }
    </style>
</head>

<body>
   
    <h1 style="text-align: center;color: white;background-color: black;">Effect Test</h1>
    <!-- Bar Chart-->
    <div class="containlist">
        <div class="list" style="background-image: url(006.jpg);">
            Kimono Girl
    </div>

    <div class="containlist">
        <div class="list" style="background-image: url(001.png);">
            Sky Mirror</div>
    </div>

    <div class="containlist">
        <div class="list" style="background-image: url(002.png);">
            Purple scenery</div>
    </div>

    <div class="containlist">
        <div class="list" style="background-image: url(003.png);">
            I am very cute</div>
    </div>

     
</body>

</html>

Actual effect :

insert image description here

git graph

insert image description here

The style of the picture can be changed by yourself to create your own middle school style.

This is the end of this article about CSS3 mouse hover transition zoom effect. For more related CSS3 mouse hover transition zoom content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

<<: Detailed explanation of gcc command usage under Linux system

>>: Detailed steps for developing Java payment interface for Alipay

js to achieve the effect of dragging the slider

CSS3 mouse hover transition zoom effect

js to achieve the effect of dragging the slider

npm Taobao mirror modification explanation

Tutorial on building svn server with docker

Detailed explanation of the JVM series memory model

React's component collaborative use implementation

Detailed explanation of Vue's monitoring properties

Introduction to using window.open, a jump menu that opens in a new window

Detailed tutorial for installing influxdb in docker (performance test)

jQuery implements dynamic tag event

Introduction to the role of HTML doctype

Recommend

Detailed explanation of the solution to the problem that the content pointed to by the iframe's src does not refresh

The most commonly used HTML tags to create web pages

Docker's flexible implementation of building a PHP environment

4 Ways to Quickly Teach Yourself Linux Commands

How to use worm replication in Mysql data table

Summary of some efficient magic operators in JS

Implementation of Grid common layout

Master the commonly used HTML tags for quoting content in web pages

Introduction to Enterprise Production MySQL Optimization

Troubleshooting the cause of 502 bad gateway error on nginx server

Why Use DOCTYPE HTML

Solution to the problem that mysql cannot start after modifying the default path of the database

Writing daily automatic backup of MySQL database using mysqldump in Centos7

Why does your height:100% not work?

How to install Odoo12 development environment on Windows 10