三種鼠標通過圖片變更效果（透明度、灰白、縮放）

使用的bootstrap 4.0框架（與標題無關）作css底層框架css

html部分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部分web

//圖片縮放
.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;
}