Close

Image and title with scale/rotate effect on hover

This is another example for a card layout with an image, and a title with a hover effect, designed using CSS, HTML, 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 'Poppins: 400,700', Arial, sans-serif, position as relative, display as inline-block, margin as 10px, min-width as 250px, max-width as 310px, width as 100%, 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 44px, font-weight as 400, line-height as 1, letter-spacing as 1px, text-transform as uppercase, and margin: 3px 0. The title 1 is given a font weight of 700, title 2 is given a font weight of 300 and a color of #a58e7c, and title 3 is given a font weight of 700 and a font size of 25px. The image takes a transformation of scale(1.3) rotate(5deg), in a hover effect. Source: https://littlesnippets.net/snip1581

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.