Close

Image, title and position with hover effect

This is another example of a card layout with an image, title, and position 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 they styles of font-family as 'Raleway', Arial, sans-serif, position as relative, display as inline-block, margin as 10px, min-width as 250px, max-width as 310px, background-color as #000000, color as #ffffff, text-align as left, font-size as 16px, and box-shadow: 0 0 5px rgba(0, 0, 0, 0.15). The image has the styles of vertical-align as top and max-width: 100%. The header inside the image has the styles of font size as 20px, font-weight as 400, line-height as 20px, and margin as 3px 0 whereas the subtitle is given the styles of font-weight as 400, margin as 0, color as #bbb, and letter-spacing as 1px. In a hover event, the background of the card turns to #fff where the color of subtitles turns to #333. Source: https://littlesnippets.net/snip1580

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.