How to enlarge the image by placing the mouse in css3? (with code)-CSS Tutorial-php.cn

How to enlarge the image by placing the mouse in css3? (with code)

不言

Release： 2018-10-10 14:11:03

Original

13720 people have browsed it

In the study of css3, we will often make some small animation effects, which is very interesting, so today’s article will introduce to you an effect of css3 to achieve image amplification. Interested friends can take a look.

We all know that CSS3 adds a transform attribute that applies to 2D or 3D transformation of elements. The transform attribute allows us to rotate, scale, move or tilt elements. Therefore, the transform attribute is needed to achieve image enlargement in css3. Let's take a look at the effect of using the transform attribute in css3 to achieve image enlargement.

The first type: css3 realizes the effect that when we put the mouse on the picture, the picture is enlarged and the excess part is not hidden:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.enlarge{
    width: 300px;
    height: 300px;
    border: 1px #ffffff solid;
}
.enlarge img{
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: all 0.6s;
    -ms-transition: all 0.8s;
}
.enlarge img:hover{
    transform: scale(1.2);
    -ms-transform: scale(1.2);
}
</style>
</head>
<body>
<div class="enlarge">
    <img src="images/tu.jpg" alt="图片"/>
</div>      
</body>
</html>

Copy after login

css3 The comparison before and after the effect of placing the mouse on the picture to enlarge the picture is as follows: The effect of enlarging the picture and hiding the part beyond it:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.enlarge{
    width: 300px;
    height: 300px;
    overflow: hidden;
    border: 1px #ffffff solid;
}
.enlarge img{
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: all 0.6s;
    -ms-transition: all 0.8s;
}
.enlarge img:hover{
    transform: scale(1.3);
    -ms-transform: scale(1.3);
}
</style>
</head>
<body>
<div class="enlarge">
    <img src="images/tu.jpg" alt="图片"/>
</div>      
</body>
</html>

Copy after login

How to enlarge the image by placing the mouse in css3? (with code) css3 The before and after effect of placing the mouse on the picture to enlarge is as follows:

## Note: For the above two situations of enlarging images using css3, the :hover pseudo-class is used, which represents the state when the mouse is hovering, so that when we put the mouse on the image, it will Let the picture be enlarged, and when the mouse is removed, the picture will return to its original size.

The above is the entire content of this article. For more detailed usage of the transform attribute in css3, you can refer to css3 Learning Manual for further understanding.

The above is the detailed content of How to enlarge the image by placing the mouse in css3? (with code). For more information, please follow other related articles on the PHP Chinese website!