Close

News card with circled dated and arrow on hover.

This is an example of a card layout with news cards with circled date and arrow that appears on a hover event, designed using HTML, JavaScript, and CSS. The fonts and images are imported to the form with their URLs and JavaScript functions have been used to implement the mouse hover effects. The news card is given the styles of font-family: 'Open Sans', Arial, sans-serif, position: relative, margin: 10px, min-width: 250px, max-width: 310px, width: 100%, background-color: #ffffff, color: #000000, text-align: left, font-size: 16px, and box-shadow: 0 0 5px rgba(0, 0, 0, 0.15) whereas the image has the styles of vertical-align as top, max-width as 100%, and position as relative. The date is given a styles set of background-color: #d2652d, top: 15px, color: #fff, right: 15px, min-height: 48px, min-width: 48px, position: absolute, text-align: center, font-size: 18px, font-weight: 700, text-transform: uppercase to convert the text to uppercase automatically, border-radius: 50% to make it a circle, and padding: 10px 0.

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.