zoukankan      html  css  js  c++  java
  • 如何使用CSS在鼠标悬停时缩放图像?

    图像缩放效果,是当鼠标悬停或单击时对图像进行缩放的一种应用效果。这种影响主要用于网站上。在我们要在图像上显示用户详细信息的情况下,这个效果很有用。
    有两种方法可以创建鼠标悬停效果。

    • 使用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>
  • 相关阅读:
    jquery 删除cookie失效的解决方法
    SQL Server 抛出自定义异常,由C#程序俘获之并进行相应的处理
    SqlServer中的自增的ID的最后的值:
    Stream/Bytes[]/Image对象相互转化
    TextBox禁止复制粘贴和数字验证,小数验证,汉字验证
    扩展WPF的DataGrid按方向键移动焦点
    WPF 中获取DataGrid 模板列中控件的对像
    IIS设置文件 App_Offline.htm 网站维护
    IIS设置文件 Robots.txt 禁止爬虫
    js中的整除运算
  • 原文地址:https://www.cnblogs.com/xiewangfei123/p/12915209.html
Copyright © 2011-2022 走看看