如何使用CSS在鼠标悬停时缩放图像？
2021-02-20 19:20
标签：width dde 方法 margin char src tps 包含 back 图像缩放效果，是当鼠标悬停或单击时对图像进行缩放的一种应用效果。这种影响主要用于网站上。在我们要在图像上显示用户详细信息的情况下，这个效果很有用。 使用JavaScript 使用CSS
在本文中，我们将看到如何使用CSS来实现这种效果。本文包含两部分代码。第一部分包含HTML代码，第二部分包含CSS代码。HTML代码：在本文中，我们将使用HTML创建悬停效果时图像缩放的基本结构。 CSS代码：在本节中，我们将使用一些CSS属性在鼠标悬停时缩放图像。要创建缩放效果，我们将使用transition和transform这两个属性。 完整代码：在本文中，我们将结合以上两个部分，使用HTML和CSS在鼠标悬停时创建图像缩放效果。例： 如何使用CSS在鼠标悬停时缩放图像？ 标签：width dde 方法 margin char src tps 包含 back 原文地址：https://www.cnblogs.com/xiewangfei123/p/12915209.html
有两种方法可以创建鼠标悬停效果。
DOCTYPE html>html>head> meta charset="UTF-8" /> meta name="viewport" content="width=device-width, initial-scale=1.0" /> title> How to Zoom an Image on Mouse Hover using CSS? title> head> body> div class="geeks"> img src="https://media.geeksforgeeks.org/wp-content/uploads/20200403151026/adblur_gfg.png" alt="Geeks Image" /> div> body> html>
{ width: 300px; height: 300px; overflow: hidden; margin: 0 auto; }
.geeks img { width: 100%; transition: 0.5s all ease-in-out; }
.geeks:hover img { transform: scale(1.5); }
DOCTYPE html>html>head> meta charset="UTF-8" /> meta name="viewport" content= "width=device-width, initial-scale=1.0" /> title> How to Zoom an Image on Mouse Hover using CSS? title> style> .geeks { width: 300px; height: 300px; overflow: hidden; margin: 0 auto; } .geeks img { width: 100%; transition: 0.5s all ease-in-out; } .geeks:hover img { transform: scale(1.5); }style>head>body> div class="geeks"> img src="https://media.geeksforgeeks.org/wp-content/uploads/20200403151026/adblur_gfg.png" alt="Geeks Image" /> div>body>html>
上一篇：PHP调试总结
下一篇：HTML5的优势有哪些？
文章标题：如何使用CSS在鼠标悬停时缩放图像？
文章链接：http://soscw.com/index.php/essay/58121.html