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

使用的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; }

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