Animated Photo Gallery
This is an example of an animated photo gallery with hover effects, designed using HTML, CSS, and Bootstrap framework 4. The images are imported to the form with their URLs, whereas the media queries are used to increase the responsiveness of the form. The body of the form is given the styles of background as #222, font-family as "Fira Sans", sans-serif, and padding-right as 2rem. The image gallery is given a max-width of 1300px. The image wrapper is given the styles of justify-content as flex-end, background as #222, border-right as 2px solid #333, and position as relative. The image name is given the styles of text-transform as uppercase to automatically convert the text to uppercase, font-size as 40px, letter-spacing as 2px, and color as transparent. The first strip of images is given an animation of 60s move-it ease alternate infinite 5s, with a transforming effect of translateY(2%), whereas the second one is given 58s move-it-2 ease alternate infinite 5s with transform as translateY(-50%). The third one has an animation of 70s move-it ease alternate infinite 6s, with transform as translateY(2%), while the fourth one is given 65s move-it-2 ease alternate infinite 5.5s, with transform as translateY(-50%). The animation-play-state of the images become paused, in a hover event.