Close

Image with title and caption on hover.

This is another example of a card layout with images with a title and a description that appears on hover, designed using HTML, JavaScript, 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 background-color as #fff, color as #ffffff, display as inline-block, font-family as 'Source Sans Pro', sans-serif, font-size as 16px, margin as 10px 5px, max-width as 315px, min-width as 230px, overflow as hidden, position as relative, text-align as right, and width as 100%. The image has the styles of vertical-align as top, max-width as 100%, and backface-visibility as hidden. The upper layer is given the color #b81212 which takes a transforming effect of skew(-30deg), in a hover event. The name has the styles of font-family as 'Teko', sans-serif, font-size as 36px, font-weight as 700, line-height as 1em, and text-transform as uppercase whereas the description is given a font-size of 0.9em.

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.