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

jQuery plugin to implement minesweeper game (1)

CSS3 mouse hover transition zoom effect

jQuery plugin to implement minesweeper game (1)

Using JS to implement a simple calculator

Docker compose deploys SpringBoot project to connect to MySQL and the pitfalls encountered

CSS example code for implementing sliding doors

5 Easy Ways to Free Up Space on Ubuntu

Prototype and prototype chain prototype and proto details

React Fiber structure creation steps

This article summarizes the implementation methods of 6 load balancing technologies (summary)

Solutions to MySQL OOM (memory overflow)

Using text shadow and element shadow effects in CSS

Recommend

Detailed explanation of how CocosCreator system events are generated and triggered

Mysql database advanced usage of views, transactions, indexes, self-connections, user management example analysis

Methods and techniques for designing an interesting website (picture)

VMware virtual machine installation Linux system graphic tutorial

uni-app implements NFC reading function

Tutorial on installing Android Studio on Ubuntu 19 and below

How to create a Docker repository using Nexus

One command lets you understand the common parameters of the read command in the shell

Implementation example of Docker deployment of front-end and back-end separation projects

Install MySQL in Ubuntu 18.04 (Graphical Tutorial)

Three ways to achieve text flashing effect in CSS3 Example code

Explanation of several ways to run Tomcat under Linux

Three ways to align div horizontal layout on both sides

Detailed explanation of Docker's most commonly used image commands and container commands

Get the IP and host name of all hosts on Zabbix