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:441327browse

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：The zoom attribute or overflow:auto attribute in CSS clears floatingNext article：The zoom attribute or overflow:auto attribute in CSS clears floating

See more

No need for JS and jQuery to implement CSS3 mouse floating to enlarge the picture

Related articles