Close

Image and title with title border effect on hover

This is an example of a card layout with an image and title with title border effect on hover, designed using HTML, CSS, and JavaScript. 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 background-color as #000, display as inline-block, font-family as 'Open Sans', sans-serif, font-size as 16px, margin as 10px, max-width as 315px, min-width as 230px, overflow as hidden, position as relative, text-align as center, and width as 100%. The image has the styles of vertical-align as top, max-width as 100%, and backface-visibility as hidden. The title inside the image s given the styles of background-color as #c73232, color as #ffffff, font-size as 0.9em, font-weight as 600, letter-spacing as 1px, padding as 5px 10px, and text-transform as uppercase to automatically transform the text to uppercase. In a hover event, the opacity of the image becomes 0.1 and the title gets a border effect with the color #ffffff.

Post Comment or Questions

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

Your email address will not be published.

Several Related Snippets

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