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

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

html部分

	

		

			
				
				投资移民计划
			
		
		

			
				
				投资移民计划
			
		
		

			
		
	

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;
}