[英]chrome: border-radius on image with padding and background
I would like to create hover effect with gradient circle.我想用渐变圆创建悬停效果。 This code work in firefox and used to work in chrome before.
这段代码在 Firefox 中工作,以前在 chrome 中工作过。 Now chrome doesn't apply border-radius on padded image.
现在 chrome 不会在填充图像上应用边框半径。 Please, is it possible to make it work in chrome again?
请问,可以让它再次在chrome中工作吗? Thanks for help.
感谢帮助。
.wrap { width: 400px; height: 400px; } a { display: block; padding: 20px 50px; text-decoration: none; } a:hover { text-decoration: none; } img { max-width: 100%; border-radius: 500px; padding: 0; transition: padding .4s; box-sizing: border-box; } a:hover>img { background: linear-gradient(to right, #d31249, #F60); padding: 15px; }
<div class="wrap"> <a href="#"> <img src="https://image.freepik.com/free-icon/important-person_318-10744.jpg" alt=""> </a> </div>
You can make the effect on the a
element instead of the img
.您可以对
a
元素而不是img
。 I have also added the fadeout effect so the gradient is also visible on mouseout我还添加了淡出效果,因此在鼠标移出时也可以看到渐变
a.wrap { display: block; width: 300px; height: 300px; text-decoration: none; border-radius: 50%; padding: 0; transition: padding .4s, background-size 0s 0.4s; box-sizing: border-box; overflow: hidden; background: linear-gradient(to right, #d31249, #F60); background-size: 0 0; } img { max-width: 100%; border-radius: 50%; display: block; } a.wrap:hover { padding: 15px; transition: padding .4s, background 0s; background-size: 100% 100%; }
<a href="#" class="wrap"> <img src="https://image.freepik.com/free-icon/important-person_318-10744.jpg" alt=""> </a>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.