欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-06-22 11:20:27
CSS之鼠标悬停时缩放图像前言图片素材HTMLCSS完整代码效果前言图像缩放效果：当鼠标悬停或单击时对图像进行缩放的一种应用效果。这种影响主要用于网站上。当我们要在图像上显示用户详细信息的情况下，这个效果很有用。有两种方法可以创建鼠标悬停效果。使用JavaScript使用CSS我这里使用的是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编写)

本文地址：https://blog.csdn.net/weixin_45048331/article/details/109260047

相关标签： 问题解决 1024程序员节

上一篇： JavaScript中Array+String常用API(总结)

下一篇： 最甜最撩人的韩剧：内在美上榜，它火遍全亚洲

推荐阅读