This is an example of an image gallery layout with expanding hover effects, designed using HTML, CSS, and Bootstrap framework 4. The gallery consists of five image cards with different styles. The images are imported to the code with their URLs. The container is given the styles of width as 100vw, height as 100vh, display as flex, and box-sizing as border-box. The image card is given the styles of width as 20vw, color as #fff, text-align as center, line-height as 100vh, flex-grow as 1, background-size as cover !important, background-position as center, transition as 1s, and background-repeat as no-repeat. In a hover event, the cards take an expanding effect by changing its width to 30vw. The card title is given the styles of width as 100%, transition as 1s, and padding as 20px 25px, which changes to color as #333, and background as rgba(255, 255, 255, 0.8), in a hover event. Source: https://www.tolmatol.com/expand-image-on-hover-flex-css-effect/