css 缩放_【开发小技巧】06—如何使用CSS在鼠标悬停时缩放图像？

英文 | https://www.geeksforgeeks.org/how-to-zoom-an-image-on-mouse-hover-using-css/?ref=rp翻译 | web前端开发(ID：web_qdkf)图像缩放效果，是当鼠标悬停或单击时对图像进行缩放的一种应用效果。这种影响主要用于网站上。在我们要在图像上显示用户详细信息的情况下，这个效果很有用。有两种方法可以创建鼠标悬停效果。

使用JavaScript
使用CSS

在本文中，我们将看到如何使用CSS来实现这种效果。本文包含两部分代码。第一部分包含HTML代码，第二部分包含CSS代码。HTML代码：在本文中，我们将使用HTML创建悬停效果时图像缩放的基本结构。

                  How to Zoom an Image on        Mouse Hover using CSS?

CSS代码：在本节中，我们将使用一些CSS属性在鼠标悬停时缩放图像。要创建缩放效果，我们将使用transition和transform这两个属性。

    .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);     }

完整代码：在本文中，我们将结合以上两个部分，使用HTML和CSS在鼠标悬停时创建图像缩放效果。例：

<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 缩放_【开发小技巧】06—如何使用CSS在鼠标悬停时缩放图像？相关推荐

图标选择器_【小技巧】巧用CSS属性值正则匹配选择器
属性值正则匹配选择器包括下面3种: [attr^="val"] [attr$="val"] [attr*="val"] 这3种属性选择器是字 ...
html鼠标悬停效果_【开发小技巧】023—如何使用HTML和CSS实现3D文字效果
来源 | https://www.geeksforgeeks.org/create-a-3d-text-effect-using-html-and-css/3D文字效果是网页设计领域中最常用的文字效果 ...
【RISC-V】嵌入式开发小技巧之代码字体缩放！
嵌入式开发小技巧之代码字体缩放!(RISC-V IDE MRS) MRS 下载地址:www.mounriver.com 字体放大:快捷键"Ctrl +" 效果: 字体缩小:快捷键& ...
移动Web开发小技巧
移动Web开发小技巧添加到主屏后的标题(IOS) name="apple-mobile-web-app-title" content="标题"> 启用 ...
Silverlight 游戏开发小技巧：实现街霸4的选人界面
Silverlight 游戏开发小技巧:实现街霸4的选人界面上一篇只是一个引子,用来说明Projection的基本操作,游戏研发都是用这些小的基本功能慢慢组合出来,其实这一篇仍然是Projectio ...
用html制作简单日历,CCS小技巧，如何使用CSS Grid制作简单的日历，简单有趣
原标题:CCS小技巧,如何使用CSS Grid制作简单的日历,简单有趣日历是人类文明的重要工具之一.然后可以记住许多重要事件,并从事件的确切日期追溯到真相. 在本文中,我们将学习如何利用CSS Gr ...
27个iOS开发小技巧
<span style="word-wrap: normal; word-break: normal; line-height: 1.5em; font-size: 14px; out ...
日常安排php,PHP日常开发小技巧
PHP日常开发小技巧导语:PHP语言中,如果你懂得一些开发技巧,那么对你学PHP,会有很大的帮助.下面的是百分网小编为大家整理的PHP日常开发小技巧,希望对你能有所帮助. PHP批量取得checkb ...
css选择器顺序的小技巧
在线演示本地下载 css的选择器的顺序其实很有意思,如果应用的好的话,可以做一些简单的逻辑出来,配合上css3,就可以尽可能的脱离js了. 这里的演示是一个带有hover事件的四张照片,效果来自一个 ...

css 缩放_【开发小技巧】06—如何使用CSS在鼠标悬停时缩放图像？

css 缩放_【开发小技巧】06—如何使用CSS在鼠标悬停时缩放图像？相关推荐

最新文章

热门文章