Blog post with image hover
This is an example of a blog page layout with hover effects, designed using HTML, CSS, and Bootstrap framework 4. The concept of Lists has been used with UL and LI components. UL element has been used with the child elements of LI to display the information, in an orderly manner. The font style and the image have been imported to the code with their URLs. The body of the form is given a background color of #eee. The form consists of three blog post cards. Each card is given the styles of transform as scale(1), opacity as 1, and transition as transform .4s ease, opacity .4s ease. In a hover event, a card takes the styles of transform as scale(1.02), opacity as .7, and a background filter as gray. The title of the card is displayed with the styles of font-size as 20px, font color as #242424, and line-height as 26px, whereas the card information displayed with the styles of font-style as italic, font color as #959595, and font-size as 12px.