Image hover with title slide in
This is an example of an image hover with a title slide effect, designed using CSS, HTML, and Bootstrap framework 4. The form consists of three images, which are imported to the code with their URLs. The font style is also imported to the code using its URL. The images are given the styles of font-family as 'Raleway', Arial, sans-serif, position as relative, margin as 10px, min-width as 220px, max-width as 310px, max-height as 220px, background as #000000, font color as #ffffff, text-align as center, box-shadow as 0 0 5px rgba(0, 0, 0, 0.15). The header titles are given a font-weight of 400, and a test-transform style as uppercase to automatically convert all the letters to uppercase. The three titles are given three different background colors as #0a212f, #36100c, and #583804. The images change their opacity to 1, and takes a transform effect of scale(1.1) on hover, whereas the title takes transform effect of skew(-10deg) rotate(-10deg) translate(-150%, -50%), to implement the sliding effect.