关键词：
图像缩放效果，是当鼠标悬停或单击时对图像进行缩放的一种应用效果。这种影响主要用于网站上。在我们要在图像上显示用户详细信息的情况下，这个效果很有用。
有两种方法可以创建鼠标悬停效果。
-
使用JavaScript
-
使用CSS
在本文中，我们将看到如何使用CSS来实现这种效果。本文包含两部分代码。第一部分包含HTML代码，第二部分包含CSS代码。HTML代码：在本文中，我们将使用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>
CSS代码：在本节中，我们将使用一些CSS属性在鼠标悬停时缩放图像。要创建缩放效果，我们将使用transition和transform这两个属性。
<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>
完整代码：在本文中，我们将结合以上两个部分，使用HTML和CSS在鼠标悬停时创建图像缩放效果。例：
<!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>
使用 CSS 在悬停图像上创建缩放效果？
】使用CSS在悬停图像上创建缩放效果？【英文标题】：CreatingaZoomEffectonanimageonhoverusingCSS?【发布时间】：2013-03-2307:54:51【问题描述】：我目前正在尝试在将鼠标悬停在我的四个图像之一上时创建缩放效果。问题是大多数示例通常... 查看详情
使用 CSS - ExtJs 进行鼠标悬停时如何更改面板上的图像？
】使用CSS-ExtJs进行鼠标悬停时如何更改面板上的图像？【英文标题】：HowtochangeimageonpanelwhendoingmouseoverusingCSS-ExtJs?【发布时间】：2018-05-2805:45:30【问题描述】：我正在尝试在使用CSS或SASS执行mouseover/mouseleave时更改图像。但是，要... 查看详情
如何使用 CSS 在悬停时向图像添加工具提示
】如何使用CSS在悬停时向图像添加工具提示【英文标题】：HowtoaddtooltiptoimageonhoverwithCSS【发布时间】：2016-08-2314:47:35【问题描述】：我有三张图片，在悬停时它们使用:hover在css中增加大小。当用户将鼠标悬停在图像上时，我还希... 查看详情
CSS样式：悬停时如何更改图像？
】CSS样式：悬停时如何更改图像？【英文标题】：CSSStyling:Howtochangetheimagewhenitishoveredover?【发布时间】：2015-04-2409:50:05【问题描述】：我正在尝试对图像进行悬停效果，当它悬停在图像上时，它将变为另一张图片。当我不使用锚... 查看详情
如何使用 CSS 使文本出现在悬停时的图像顶部
】如何使用CSS使文本出现在悬停时的图像顶部【英文标题】：HowtoGetTextToAppearOnTopofImageOnHoverWithCSS【发布时间】：2017-11-2803:48:22【问题描述】：目前，当您将鼠标悬停在图像上时，不透明度会变浅：https://jsfiddle.net/vo1npqdx/1268/这是... 查看详情
当您使用 javascript 或 jquery 将鼠标悬停时，如何使图像或按钮发光？
】当您使用javascript或jquery将鼠标悬停时，如何使图像或按钮发光？【英文标题】：Howdoyoumakeanimageorbuttonglowwhenyoumouseoverusingjavascriptorjquery?【发布时间】：2011-09-0804:50:10【问题描述】：我想在鼠标悬停在按钮或图像上时添加发光效... 查看详情
使用css将鼠标悬停在按钮上时如何更改站点背景图像？
】使用css将鼠标悬停在按钮上时如何更改站点背景图像？【英文标题】：HowcanIchangeasitesbackgroundimagewhenhoveringoverabuttonusingcss?【发布时间】：2019-08-2405:26:12【问题描述】：对于一个学校项目，我们需要使用html、css和php制作一个基... 查看详情
将鼠标悬停在javascript和/或css列表中的相应单词时，如何显示不同的图像？
我有一个“系列”列表，当用户将鼠标悬停在列表中的系列名称上时，我想要一个连接到所述系列的图像弹出。我也希望它弹出transition的.5s。我已经遇到了一个问题22，如果我在CSS中使用悬停效果并从display:none;->display:block;我... 查看详情
如何在 Unity 5 中检测 UI 图像的鼠标悬停？
】如何在Unity5中检测UI图像的鼠标悬停？【英文标题】：HowtodetectmouseoverforUIimageinUnity5?【发布时间】：2015-09-2019:53:12【问题描述】：我有一张图片，我已经设置好可以四处移动和放大和缩小。问题是可以从场景中的任何地方进行... 查看详情
如何在悬停时将过渡速度应用于缩放图像？
】如何在悬停时将过渡速度应用于缩放图像？【英文标题】：Howtoapplyatransitionspeedtoascaledimageonhover?【发布时间】：2021-10-2717:09:23【问题描述】：我在下面的sn-p中有一张卡片。我试图弄清楚如何在悬停时将过渡速度应用于缩放图... 查看详情
如何通过将鼠标悬停在同一页面上的图像上来触发 CSS 动画按钮
】如何通过将鼠标悬停在同一页面上的图像上来触发CSS动画按钮【英文标题】：Howtotriggeracssanimatedbuttonbyhoveringoveranimageonthesamepage【发布时间】：2013-08-2501:17:58【问题描述】：我的网站出现问题。在主页上，我有一张图片。图片... 查看详情
将鼠标悬停在 img 上时，所有其他图像都使用 CSS 模糊：not(:hover)
...布时间】：2021-02-2116:15:13【问题描述】：我正在尝试研究如何在一个图像被悬停时对所有其他图像应用模糊效果：img:not(:hover)filter:blur(3px);-webkit-transition:400m 查看详情
将鼠标悬停在 li 上时更改图像并使用 CSS 永久保存该图像
】将鼠标悬停在li上时更改图像并使用CSS永久保存该图像【英文标题】：ChangeimagewhenhoveringoverliandkeepthatimagepermanentusingCSS【发布时间】：2016-09-2210:05:42【问题描述】：对于我的生活，我无法弄清楚。本质上，有一个在页面访问时... 查看详情
Wordpress 将鼠标悬停在图像上
...题描述】：我正在尝试从单个拆分PNG中创建悬停在图像上如何启用它，以便当图像未悬停时，顶部图像将显示，但当它们悬停时，底部图像将显示。【问题讨论】：google.com/search?q=css+sprites【参考方案1】：您要求的技术称为“CSS-... 查看详情
使用 CSS 变换在悬停时缩放 SVG 矩形
...行为方式不同，这正是我的问题。http://jsfiddle.net/rKD7T/2/如何使rect的行为与p完全相同 查看详情
如何使用css在悬停时在图像上显示图像
】如何使用css在悬停时在图像上显示图像【英文标题】：Howtodisplayimageoverimageonhoverwithcss【发布时间】：2013-08-2402:10:20【问题描述】：我有一个带有links的图片库。编辑：这是我必须使用的代码：<divclass="gallerypagetabs"><ahref="... 查看详情
使用对象时如何在鼠标悬停时更改 SVG 笔触颜色
】使用对象时如何在鼠标悬停时更改SVG笔触颜色【英文标题】：HowtochangeSVGstrokecoloronmouseoverwhenusinganobject【发布时间】：2020-05-3016:50:15【问题描述】：当鼠标移到图像上时，我正在尝试更改svg图像笔触颜色。我现在所拥有的并没... 查看详情
使用jquery在悬停时添加随机图像
】使用jquery在悬停时添加随机图像【英文标题】：Addrandomimageonhoverusingjquery【发布时间】：2021-10-1721:07:27【问题描述】：HTML和CSS很难修改，除了给div加上class和ID。那么为什么我要尝试使用JSJquery来处理它。当我将鼠标悬停在... 查看详情