鼠标悬停时缩放图像(Css编写)

最新推荐文章于 2024-01-27 20:29:14 发布

.G( );

最新推荐文章于 2024-01-27 20:29:14 发布

阅读量1.5k

点赞数 1

分类专栏：学习文章标签： 1024程序员节

本文链接：https://blog.csdn.net/weixin_45048331/article/details/109260047

版权

学习专栏收录该内容

18 篇文章 0 订阅

订阅专栏

CSS之鼠标悬停时缩放图像

前言
图片素材
HTML
CSS
完整代码
效果

前言

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

有两种方法可以创建鼠标悬停效果。

使用JavaScript
使用CSS

我这里使用的是CSS

图片素材

图片(可替换)：

css

HTML

代码(示例)：

<!DOCTYPE html>
<html>
<head>   
    <meta charset="UTF-8" />   
    <meta name="viewport" content= "width=device-width, initial-scale=1.0" />    
    <title> 鼠标悬停时缩放图像 </title>    
</head>
<body>  
    <div class="gks"> 
        <img src="css.jpg"alt="Image" />  <!--替换图片，注意路径--> 
    </div>
</body>
</html>

CSS

代码(示例)：

<style>       
    .gks {           
    width: 300px;         
    height: 300px;          
    overflow: hidden;          
    margin: 0 auto;       
    }      
    .gks img {           
    width: 100%;          
    transition: 0.5s all ease-in-out;    
    }       
    .gks:hover img { 
        transform: scale(1.5); 
    }
</style>

完整代码

代码：

<!DOCTYPE html>
<html>
<head>   
    <meta charset="UTF-8" />   
    <meta name="viewport" content= "width=device-width, initial-scale=1.0" />    
    <title> 鼠标悬停时缩放图像 </title>    
<style>       
    .gks {           
    width: 300px;         
    height: 300px;          
    overflow: hidden;          
    margin: 0 auto;       
    }      
    .gks img {           
    width: 100%;          
    transition: 0.5s all ease-in-out;    
    }       
    .gks:hover img { 
        transform: scale(1.5); 
    }
</style>
</head>
<body>  
    <div class="gks"> 
        <img src="css.jpg"alt="Image" />  <!--替换图片，注意路径--> 
    </div>
</body>
</html>

效果

最终效果：当鼠标放在图片上时

css

.G( );

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
鼠标悬停时缩放图像(Css编写)

CSS之鼠标悬停时缩放图像前言图片素材HTMLCSS完整代码效果前言图像缩放效果：当鼠标悬停或单击时对图像进行缩放的一种应用效果。这种影响主要用于网站上。当我们要在图像上显示用户详细信息的情况下，这个效果很有用。有两种方法可以创建鼠标悬停效果。使用JavaScript使用CSS我这里使用的是CSS图片素材图片(可替换)：HTML代码(示例)：<!DOCTYPE html><html><head> <meta ch
复制链接

扫一扫