Close

Image with title and subtitle on hover

This is an example of a card layout with an image, title, and subtitle with a hover effect, 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 font-family as 'Montserrat', Arial, sans-serif, position as relative, display as inline-block, margin as 10px, min-width as 230px, max-width as 315px, color as #fff, text-align as left, font-size as 16px, and background as #000. The image has the styles of vertical-align as top and backface-visibility as hidden. The title has the styles of font-size as 1.1em and font-weight as normal whereas the subtitle is given the font size .8em and text-transform as uppercase to automatically transform the text to uppercase. The image takes a filter effect of alpha (opacity=20) in a hover event with the title and subtitle appearing in it.

Post Comment or Questions

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

Your email address will not be published.

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.