Safari中带有边框半径和：hover错误的图像

Question

When hovering over an image with border-radius, the style is set even when the cursor is outside the clipped image (inside the square containing the image).

This happens in Safari; it works correctly in Firefox and Chrome. Is there any way to fix it using CSS?

 .imagen { border-radius: 50%; } .imagen:hover { opacity: .5; } 

 <img src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Vado_l_ammazzo_e_torno-George_Hilton.jpg" class="imagen" /> 

Answer 1

The best cross-platform solution is probably to use the CSS url() function with the background property:

 #image { border-radius: 50%; height: 250px; width: 250px; background: url('https://upload.wikimedia.org/wikipedia/commons/a/a0/Vado_l_ammazzo_e_torno-George_Hilton.jpg') 0px 0px/contain; } #image:hover { opacity: .5; } 

 <div id='image'></div>