How does CSS set the picture zoom effect?
May 29, 2021 Article blog
When we browse the web, we often see an effect that is zoomed in or out when we slide the mouse over a picture or an area, highlighting the effect. In fact, this effect is not difficult to achieve, then this article W3Cschool editor-in-chief to teach you how to set up CSS image amplification effect.
The specific effect
Idea: The animation effect of the picture amplification is still implemented by
transition
and
transform
Set the initial position of the div, the time of transition, and so on, and then set the properties of translate, scale, rotate, and so on.
translate: represents horizontal and vertical movement;
scale: for horizontal and vertical simultaneous scaling;
rotate: Represents the angle of rotation.
Specific code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS图片放大 - 编程狮(w3cschool.cn)</title>
<style>
div {
width: 200px;
height: 100px;
transition: all .3s;
}
div:hover {
transform: translate(100px, 100px) scale(2) rotate(0deg);
}
</style>
</head>
<body>
<div>
<img src="https://7n.w3cschool.cn/statics/img/logo/[email protected]" alt="w3cschool">
</div>
</body>
</html>
That's all CSS says about how to zoom in on a picture. For more CSS-related tutorials, follow the W3Cschool website.
Related CSS effects: How CSS sets picture rotation, and how CSS achieves shadow effects