纯CSS实现图像鼠标悬停效果

最新推荐文章于 2026-06-06 13:09:37 发布

原创

最新推荐文章于 2026-06-06 13:09:37 发布 · 2.5w 阅读

收录于

当前文章被以下社区和专栏收录：

本文展示了如何仅使用CSS实现鼠标悬停时的图像效果，包括三种不同的效果：效果1、效果2和效果3。效果2涉及上下滑动的图像展示，通过HTML和CSS的clip属性实现。推荐阅读张鑫旭的文章和Codrops的教程来深入理解CSS裁剪功能。效果3利用CSS的斜切技巧创建三角形裁剪效果。欢迎大家探索更多实现方式。

前端开发whqet,csdn,王海庆,whqet,前端开发专家

今天来看一组纯CSS实现的鼠标悬停效果，在线研究代码点效果一、效果二、效果三，下载收藏点这里，效果预览点这里。

效果1

效果1的html文件

<div class="pic">
	<img src="pic.jpg" alt="">
	<span>这里是个标题呀</span>
</div>

css文件中我们主要实现定位和hover动画。

/* 图片盒子的样式，宽高、边框、阴影、位置、鼠标样式、溢出 */
.pic{
	width: 500px;
	height: 500px;
	border: 10px solid #333;
	box-shadow: 0 0 10px rgba(0,0,0,.6);
	margin: 50px auto;
	position: relative;
	overflow: hidden;
	cursor: pointer;
}
/* 图片标题的样式，宽高、背景色、水平垂直居中、定位，透明度 */
.pic span{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 500px;
	height: 50px;
	background: rgba(0,0,0,.5);
	color: #fff;
	font-size: 24px;
	line-height: 50px;
	text-align: center;
	opacity: 0;
}
/* 给需要动画的元素加过渡属性 */
.pic img,.pic span{
	transition: all .5s;
}
/* hover之后透明动画 */
.pic:hover span{
	opacity: 1;
}

标签