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

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

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

    推荐阅读