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

最新推荐文章于 2023-12-01 12:58:10 发布

GLyihu

最新推荐文章于 2023-12-01 12:58:10 发布

阅读量1.4k

点赞数

分类专栏： HTML 文章标签： css css效果

本文链接：https://blog.csdn.net/GLyihu/article/details/88873010

版权

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

摘要由CSDN通过智能技术生成

使用的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&