Skip to content

A repository to store small CSS and JS snippets.

Notifications You must be signed in to change notification settings

dberri/web_snippets

Repository files navigation

web_snippets

A repository to store small CSS and JS animation snippets.

Hover Outline Animation

A transition applied to an image when hovered. An overlay fades in with a text and an outline drawing itself from the center.

Sliding Overlay

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.

Image Hover Animation

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.

Slide Toggle

A slide toggle made only with HTML elements.

Box Hover

Divs scale up and change the background color with a fade transition on hover.

Releases

No releases published

Packages

No packages published