只需2行,纯CSS实现鼠标滑过图片缓缓放大的效果,附源码

疯狂的代码 前端 2019-06-27

效果如下图所示:

1、当未鼠标未放到图片上的效果:

只需2行,纯CSS实现鼠标滑过图片缓缓放大的效果,附源码

2、当鼠标放到图片上后(放大的过程是有动画过渡的,这个过渡的时间可以自定义):

只需2行,纯CSS实现鼠标滑过图片缓缓放大的效果,附源码

实现代码:

CSS3实现很简单,给一个图片以下样式即可:

CSS代码:

<style type="text/css">
.img-wrap{width: 172px; height: 95px; overflow: hidden;}
.img-css{width: 172px; height: 95px;object-fit: cover;transition: all 0.6s;}
.img-css:hover{transform: scale(1.4);}
</style>

HTML代码:

<div class="img-wrap">
    <img class="img-css" src="https://img.cdn.apipost.cn/statics/top/2019_04_15_462309671_thumb.png"/>
</div>

示例效果:

只需2行,纯CSS实现鼠标滑过图片缓缓放大的效果,附源码

评论