Bootstrap Blog Layout
This is an example of a Blog layout with hover effects, designed using HTML, CSS, and Bootstrap framework 4. The CSS and Bootstrap styles are imported to the code with their URLs. The background form is given the styles of height as 105px, width as 100%, and background-color as #ffffff. The inner box of the blog card is given the styles of padding as 0 40px 35px, background-color as #fafafa, and border-radius as 10px. The image box is given a background color of #9C27B0 to appear only in a hover event. The image is given a transition value of all 500ms ease. In a hover event, the image takes a transform effect of scale(1.1), and an opacity value of .5. The information box has the styles of width as 100%, background-color as #ffffff, transform as translateY(-50%), min-height as 80px, padding-top as 20px, text-align as center, border-radius as 5px, and box-shadow as 0 18px 28px rgba(11,11,77,.14). The blog card title is given the styles of font-size as 18px, line-height as 25px, color as #12114a, font-weight as 500, and margin-bottom as 18px. In a hover event, the card title takes the color of #9C27B0.