Navaneeth Venugopal Navaneeth Venugopal - 6 months ago 32
HTML Question

How to get Circle Hover Effects with CSS Transitions with img tag?

I want Circle Hover Effects with CSS Transitions on

<img>
tag without calling the image as background image.

I have created a JSFiddle of the effect I want.But in this fiddle image is used as a background image. I want same effect.But with image in an
img
tag no as background image.

Answer

I've edited your fiddle here: http://jsfiddle.net/pedwf80h/7/

Essentially I've moved the img url from the background to within the li element. Then positioned the img absolutely and used z-index to move it to the back. The li element then uses overflow: hidden and border-radius: 100% to hide any of the image that goes outside of our li element.

Hope this helps!

Comments