84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
多数实现鼠标悬停图片放大效果的案例都是方形的,方形的框不动,里面的内容放大,我想要圆形的框不动,里面的内容放大,该如何处理呢?
光阴似箭催人老,日月如移越少年。
HTML
<p class="circle-wrapper"> <img src="" > </p>
CSS
.circle-wrapper, .circle-wrapper img { display: inline-block; width: 50px; height: 50px; border-radius: 50%; -webkit-transition: .3s; transition: .3s; } .circle-wrapper { border: 1px solid #ddd; position: relative; overflow: hidden; } .circle-wrapper img { position: absolute; } .circle-wrapper img:hover { -webkit-transform: scale(2); transform: scale(2); }
楼上写的样式可以参考下哦
谢邀 。css3的transform。一楼有代码
兼容版的思路,p内包含img,鼠标悬停时,图片增大,图片位置也对应调整
p
img
HTML
CSS
楼上写的样式可以参考下哦
谢邀 。css3的transform。一楼有代码
兼容版的思路,
p
内包含img
,鼠标悬停时,图片增大,图片位置也对应调整