84669 Lernen von Personen
152542 Lernen von Personen
20005 Lernen von Personen
5487 Lernen von Personen
7821 Lernen von Personen
359900 Lernen von Personen
3350 Lernen von Personen
180660 Lernen von Personen
48569 Lernen von Personen
18603 Lernen von Personen
40936 Lernen von Personen
1549 Lernen von Personen
1183 Lernen von Personen
32909 Lernen von Personen
多数实现鼠标悬停图片放大效果的案例都是方形的,方形的框不动,里面的内容放大,我想要圆形的框不动,里面的内容放大,该如何处理呢?
光阴似箭催人老,日月如移越少年。
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
,鼠标悬停时,图片增大,图片位置也对应调整