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.
<!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 :
git graph
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
Recommend
Analysis of multi-threaded programming examples under Linux
1 Introduction Thread technology was proposed as ...
Detailed explanation of Angular data binding and its implementation
Table of contents Preface What is data binding? T...
Summary of several key points about mysql init_connect
The role of init_connect init_connect is usually ...
How to Rename Multiple Files at Once in Linux
Preface In our daily work, we often need to renam...
Web design and production test questions and reference answers
<br />Web Design and Production Test Part I ...
CSS implements six adaptive two-column layout methods
HTML structure <body> <div class="w...
Detailed explanation of nginx shared memory mechanism
Nginx's shared memory is one of the main reas...
js implements table drag options
This article example shares the specific code of ...
Mysql5.7 service cannot be started. Graphical solution tutorial
p>Manually start in "Services" and i...
JS array deduplication details
Table of contents 1 Test Cases 2 JS array dedupli...
MYSQL Left Join optimization (10 seconds to 20 milliseconds)
Table of contents 【Function Background】 [Raw SQL]...
Tutorial on building nextcloud personal network disk with Docker
Table of contents 1. Introduction 2. Deployment E...
How to use Linux to calculate the disk space occupied by timed files
Open the scheduled task editor. Cent uses vim to ...
How to solve the mysql insert garbled problem
Problem description: When inserting Chinese chara...
Use prometheus to count the remaining available percentage of MySQL auto-increment primary keys
Recently, a database in the production environmen...