Close

News Card with image and ‘read more’

This is an example of a card layout web form with news card with image, and read more text, 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: 'Roboto', Arial, sans-serif, position: relative, overflow: hidden, margin: 10px, min-width: 230px, max-width: 315px, width: 100%, color: #ffffff, text-align: left, line-height: 1.4em, and background-color: #141414. The image has the styles of vertical-align as top, max-width as 100%, and opacity as 0.85. The date is given a styles set of background-color: #1e1e1e, padding: 10px 25px 0, text-align: right, font-size: 0.8em, letter-spacing: 1px, color: rgba (255, 255, 255, 0.5), and text-transform: uppercase to convert the text to uppercase. The text-transform for Read more button is also set as uppercase with a border and background color of #ffffff, font size of 0.7em and letter spacing of 1px. The opacity of the button changes to 1 in a hover event.

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 *

Several Related Snippets

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