码迷,mamicode.com
首页 > Web开发 > 详细

css图片hover放大

时间:2017-10-27 01:14:55      阅读:379      评论:0      收藏:0      [点我收藏+]

标签:容器   pen   flow   设置   href   图片   dem   ref   hover   

今天看到哔哩哔哩图片站的图片hover效果,看了下f12,写了个demo。

codepen代码如下
https://codepen.io/bhaltair/pen/zPOxry

原理是:

利用图片容器设置transform: scale(1.1),并且设置transition: transform 0.5s;

外层容器设置定宽和定高,overflow:hidden

外层容器hover的时候设置图片容器scale就可以实现我们的效果了

css图片hover放大

标签:容器   pen   flow   设置   href   图片   dem   ref   hover   

原文地址:http://www.cnblogs.com/bhaltair/p/css-tu-pianhover-fang-da.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!