Navaneeth Venugopal Navaneeth Venugopal - 1 year ago 134
HTML Question

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

I want Circle Hover Effects with CSS Transitions on

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
tag no as background image.

Answer Source

I've edited your fiddle here:

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!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download