Home > Article > Web Front-end > No need for JS and jQuery to implement CSS3 mouse floating to enlarge the picture
No need for JS and jQuery to implement CSS3 mouse floating to enlarge the picture
- 高洛峰Original
- 2017-03-01 15:21:441360browse
This article will share with you a piece of css3 code to achieve the effect of mouse floating and enlarging pictures. There is no need for js and jquery code in the code. It is very good and has reference value. Interested friends can refer to it
No need for JS and jQuery Code to realize CSS3 mouse floating to enlarge the picture
<html>
<head>
<title></title>
<style>
.box {
/* 可见视觉区域 */
width: 480px; height: 250px;
position: relative;
overflow: hidden;
cursor: pointer;
}
.size {
width: 1000px; height: 1000px;
position: absolute; left: 50%; top: 50%;
margin: -500px 0 0 -500px;
/* 水平居中 */
text-align: center;
}
.zoom {
/* 缩放的元素 */
width: 480px; height: 250px;
vertical-align: middle;
-webkit-transition: -webkit-transform .2s;
transition: transform .2s;
}
.box:hover .zoom {
/* hover放大 */
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
zoom: 1.05;
}
:root .box:hover .zoom {
zoom: 1;
}
.middle {
/* 垂直居中 */
display: inline-block;
width: 0; height: 100%;
vertical-align: middle;
}
</style>
</head>
<body>
<h4>左上角定位</h4>
<p class="box">
<img src="dafu.jpg" class="zoom">
</p>
<h4>居中定位</h4>
<p class="box">
<p class="size">
<img src="dafu.jpg" class="zoom"><i class="middle"></i>
</p>
</p>
</body>
The above is the editor’s introduction to you without JS and jQuery code to realize CSS3 mouse floating to enlarge the picture. I hope it will be useful to you. Everyone is helpful. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank you all for your support of the PHP Chinese website!
For more related articles about realizing CSS3 mouse floating and enlarging pictures without JS and jQuery, please pay attention to the PHP Chinese website!