chrome: border-radius on image with padding and background

Question

I would like to create hover effect with gradient circle. This code work in firefox and used to work in chrome before. Now chrome doesn't apply border-radius on padded image. Please, is it possible to make it work in chrome again? 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>

Answer 1

You can make the effect on the a element instead of the 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>