A repository to store small CSS and JS animation snippets.
A transition applied to an image when hovered. An overlay fades in with a text and an outline drawing itself from the center.
A transition applied when an image is hovered.
There is an overlay at the bottom of the image with a title, and the transition slides this overlay to cover the entire image and shows more information about it.
There is also small transitions with the info's underlines.
Inspired by the Jackson Guitars website: https://www.jacksonguitars.com/gear/shape/rhoads
When not in hover state, only part of the image is shown, with its container's overlay hidden.
When in hover state, the image inside the container is scaled, translated and rotated 45° do fit the said container, so the entire image is shown.
Also, a sliding information box slides in.
A slide toggle made only with HTML elements.
Divs scale up and change the background color with a fade transition on hover.