Close

Responsive accordion with a zoom-in effect

This is an example of a responsive accordion with zoom-in effect, designed using HTML, and CSS, and Bootstrap framework 4.The body of the form is given the styles of min-height as 100vh, background as #000, font-family as sans-serif, display as flex, justify-content as center, and align-items as center. The container of the accordion items is given the styles of display as flex, justify-content as center, align-items as center, margin as 10vmin, overflow as hidden, and transform as skew(5deg). The image card has the styles of all 1s ease-in-out and height as 75vmin. The image is given a filter of grayscale (100%), whereas the image card head is given the styles of color as black, background as rgba(255, 30, 173, 0.75), padding as 0.5em, transform as rotate(-90deg), transition as all 0.5s ease-in-out, and font-size as 1em. In a hover event, the grayscale filter over the image turns to 0, whereas the font-size becomes 2em, and the image takes a transform effect of rotate(0deg) skew(-5deg). Source: https://codepen.io/bbx/pen/Jxoqdg

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Several Related Snippets

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.