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. Source: https://codepen.io/oliviale/pen/RwNOPvx
This is a web form with a responsive photo gallery grid, designed using CSS, HTML, and Bootstrap framework 4. The images and CSS styles have been imported to the code with their URLs, whereas the media queries are used to increase the responsiveness of the form. The number of rows and the minimum number of columns for the grid is given as 3 and 2, respectively. The background of the form is given as #262626, with the height as 100vh, and filter as drop-shadow(2px 2px 5px). The hex cell is given the styles of grid-column-end as span 2, margin as calc(-1*var(--hl)) 0, transform as scale(.95), and clip-path as polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%) to implement the polygon shape. The images are given a transform style of scale(calc(1 + .2*var(--hl))). In a hover event, the images in the hex cell, take a zooming effect. Source: https://codepen.io/thebabydino/pen/PowXYpV
This is a template of a bootstrap tour of a web form with a navigational bar, buttons, cascading cards with social media links, and a card image gallery, designed using HTML, CSS, and JavaScript. The collapsible navigation bar is added with a dropdown list and a search bar. The bootstrap tour function is implemented using JavaScript functions. The show and hide methods of the JavaScript popover function have been used to hide and show the popup box. The images have been added to the form with their image URLs imported and the Li element of lists has been used to display the items in a list. The gallery is given an initial style set of column count as 3 (webkit-column-count: 3, moz-column-count: 3), column width as 33% (webkit-column-width: 33%, moz-column-width: 33%), transition as all 350ms ease, and animation as 1(webkit-transform: scale(1), ms-transform: scale(1)).