Close

Rounded images with icon on hover

This is a template of a web form with rounded images with an icon on a hover event, designed using JavaScript, HTML, and CSS. The fonts and images are imported to the form with their URLs. JavaScript functions have been used to implement the mouse hover effects. The image card is given the styles of position as relative, display as inline-block, margin as 20px, max-width as 190px, width as 100%, color as #bbb, font-size as 16px, and transform as translateZ(0). The image is given the styles of vertical-align as top, max-width as 100%, backface-visibility as hidden, padding as 10px, and border-radius as 50% to make it a circle. The icon in the middle is given the styles of position as absolute, top as 50%, left as 50%, font size as 4em, and transform as translate(-50%, -50%). In a hover event, the background of the image changes the color to rgba(0, 0, 0, 0.9) and its opacity to 1 whereas the border of the image with the style 2px solid #bbb gets a transforming effect of rotate(45deg).

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Several Related Snippets

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.