This is an example of a news template with hover effects, designed using JavaScript, CSS, HTML, and Bootstrap framework 4. The form consists of a background image and a hidden content section that gets expanded in a hover event. The background image is imported to the code with its URL. The title of the form is given a style as center to centralize the text. JavaScript function show(500) has been used to show the hidden content on hover, whereas the function hide(500) has been used to hide the content at other times. The time of the effect is given in milliseconds. The text color for the form is set as White in HTML. The 'Entertainment' badge has the styles of font-weight as 600, font-size as 13px, font color as white, and background-color as #289dcc. The hidden content is given a background color of rgba(76, 76, 76, 0). Source: https://bbbootstrap.com/snippets/news-template-hover-effect-90682283

This is a news card template with hover animations, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. The fonts, CSS styles, images, and icons are imported to the code using their URLs. JavaScript functions have been used to implement the filling effect of the heart icon, on a click event. The font family style for the form is given as 'Roboto', sans-serif and the body of the form is given a background color as #F2F2F2. The card container is given a width of 350px, and a height of 500px. It takes a box shadow effect of 0 0 45px gray, in a hover event. The header title of the form is given a font-size as 17px. The subtitle of the card is given a font-size as 27px, whereas the 2nd subtitle is given a font-size as 23px, and font color as #E74C3C. The cursor style is given as pointer to get the hand cursor effect. In a hover event, the image and the content section changes its size to 200px, while the image takes an animation of move1 0.5s ease both. Source: https://bbbootstrap.com/snippets/news-card-animation-28849510