2020-05-28——如何使用CSS在鼠标悬停时缩放图像？

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

有两种方法可以创建鼠标悬停效果。
1.使用JavaScript
2.使用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>

最终效果：

相关文章