三种鼠标经过图片变动效果（透明度、灰白、缩放）

最新推荐文章于 2026-06-03 14:56:40 发布

原创最新推荐文章于 2026-06-03 14:56:40 发布 · 1.5k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

HTML

这篇博客介绍了如何使用CSS实现三种鼠标经过图片的变换效果：透明度变化、灰度处理和缩放。示例代码基于bootstrap 4.0框架，详细解析了html和css部分的实现细节。

使用的bootstrap 4.0框架（与标题无关）做css底层框架

html部分

<div class="container" style="margin:20px auto">
	<div class="row">
		<div class="col-12 col-md-4">
			<a href="#" class="ho-img ho-alpha">
				<img class="img-fluid lazy" data-original="images/hot01.jpg" />
				<strong>投资移民计划</strong>
			</a>
		</div>
		<div class="col-12 col-md-4">
			<a href="#" class="ho-img ho-alpha2">
				<img class="img-fluid lazy" data-original="images/hot02.jpg" />
				<strong>投资移民计划</strong>
			</a>
		</div>
		<div class="col-12 col-md-4">
			<a href="#" class="ho-img"><img class="img-fluid lazy" data-original="images/hot03.jpg" /></a>
		</div>
	</div>
</div>

css部分

//图片缩放
.ho-img {
	display: block;
	overflow: hidden
}

.ho-img img {
	width: 100%;
	height: 100%;
	cursor: pointer;
	transition: all 0.6s
}

.ho-img img:hover {
	transform: scale(1.05)
}
//图片透明
.ho-alpha {
	background: #000;
}

.ho-alpha img {
	opacity: 0.4;
	filter: alpha(opacity=40);
}

.ho-alpha img:hover {
	opacity: 1;
	filter: alpha(opacity=100);
}
//图片灰白
.ho-alpha2 img {
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
	filter: gray;
}

.ho-alpha2 img:hover {
	-webkit-filter: grayscale(0%);
	-moz-filter: grayscale(0%);
	-ms-filter: grayscale(0%);
	-o-filter: grayscale(0%);
	filter: grayscale(0%);
}
//跟图片无关css
.ho-alpha strong,
.ho-alpha2 strong {
	position: absolute;
	bottom: 0.937rem;
}

标签

#css #css效果