Experiments

Image Gallery

Changing the image width on hover within a grid.

Original

Image Gallery

Using clip path to change the visual shape of an image.

Original

Image Gallery

Using clip path to change the visual shape of an image.

Original

Image Gallery

Changing the image width on hover within a grid.

Original

Hexagon Shaped Image

Using clip path to change the visual shape of an image.

Original

Transition Effect Animation

This effect mixes up blur and contrast filters with transition and hover.

Original

Triangle offset-distance animation

The triangle is animated using a combination of offset-path, offset-anchor and offset-distance properties. The offset-path defines the path, and the offset-distance the position within the path.

Original

Path Animation

The cyclist is animated using the offset-path css property.

Original

Text Wave Effect

Nice and simple effect in SCSS using before and after directives.

Original

Glowing Loader Animation

This is a simple effect that makes use of SVG filter to produce the glowing effect.

Original

Clip path animation

Border animation using Clippath.

Original

Bright Border

This is effect uses a conic gradient rotating in the :before element and a smaller dark element in the :after in order to pull off this.

Original

Rainbow Border

This uses 4 linear gradients extended to four colors

Original

Weird button

Solving problem from CSSBattle.com

Yellow Tears

Solving problem from CSSBattle.com

Border Animation

Nice and simple effect in SCSS using hover, before and after directives.

Original