鼠标悬停时缩放图像(Css编写)
程序员文章站
2022-04-14 12:01:09
CSS之鼠标悬停时缩放图像前言图片素材HTMLCSS完整代码效果前言图像缩放效果:当鼠标悬停或单击时对图像进行缩放的一种应用效果。这种影响主要用于网站上。当我们要在图像上显示用户详细信息的情况下,这个效果很有用。有两种方法可以创建鼠标悬停效果。使用JavaScript使用CSS我这里使用的是CSS图片素材图片(可替换):HTML代码(示例):
前言
图像缩放效果:当鼠标悬停或单击时对图像进行缩放的一种应用效果。这种影响主要用于网站上。当我们要在图像上显示用户详细信息的情况下,这个效果很有用。
有两种方法可以创建鼠标悬停效果。
- 使用JavaScript
- 使用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>
效果
最终效果:当鼠标放在图片上时
本文地址:https://blog.csdn.net/weixin_45048331/article/details/109260047
上一篇: 支付宝花呗逾期会上征信吗 花呗逾期会影响个人信用吗
下一篇: 钉钉4.3聊天页面怎么自动分组?
推荐阅读
-
编写html5时调试发现脚本php等网页js、css等失效
-
纯CSS3制作的鼠标悬停时边框旋转
-
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
-
鼠标悬停时缩放图像(Css编写)
-
通过yeoman、gulp、angular编写前段时的html模板处理,打包后找不到html的问题解决_html/css_WEB-ITnose
-
abc中,如何实现鼠标悬停时执行href?_html/css_WEB-ITnose">
在abc中,如何实现鼠标悬停时执行href?_html/css_WEB-ITnose
-
通过yeoman、gulp、angular编写前段时的html模板处理,打包后找不到html的问题解决_html/css_WEB-ITnose
-
abc中,如何实现鼠标悬停时执行href?_html/css_WEB-ITnose">
在abc中,如何实现鼠标悬停时执行href?_html/css_WEB-ITnose
-
CSS编写代码时的高性能总结
-
CSS编写代码时的高性能总结