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

Web page experience: planning and design

CSS3 mouse hover transition zoom effect

Web page experience: planning and design

Building a Redis cluster on Docker

Detailed explanation of the entry-level use of MySql stored procedure parameters

Detailed explanation of SQL injection - security (Part 2)

Comprehensive explanation of CocosCreator hot update

mysql 8.0.18.zip installation and configuration method graphic tutorial (windows 64 bit)

Introduction to useRef and useState in JavaScript

Example of cross-database query in MySQL

Vue3 navigation bar component encapsulation implementation method

Common naming rules for CSS classes and ids

Recommend

Analysis of the difference between the usage of left join setting conditions in on and where in mysql

How to choose the right MySQL datetime type to store your time

MySQL users and permissions and examples of how to crack the root password

Detailed explanation of the usage of common Linux commands (Part 2) ———— Text editor commands vi/vim

SystemC environment configuration method under Linux system

Summary of using the exclamation mark command (!) in Linux

Vuex combines session storage data to solve the problem of data loss when refreshing the page

Implementation of communication between Vue and Flask

js to achieve waterfall flow layout (infinite loading)

Quickly solve the Chinese input method problem under Linux

Some common properties of CSS

What are the advantages of MySQL MGR?

HTML version declaration DOCTYPE tag

Implementation of multi-environment configuration (.env) of vue project

MySQL quick recovery solution based on time point