Follow me and keep an eye out for HTML5 video player in this style soon!

Ribbon Wrap – much more than a hover effect

You hover over the element, the ribbon slides out from behind it and wraps around. CSS ribbons finally move.

There are endless possibilities with this CSS3 tool. It’s super easy to implement and has plenty of preset colours and styles (but customising is simple!).

Make sure to view the video preview to fully understand how cool this thing is!

What can I use it for?

Titles & descriptions of images

Ribbon Wrap can be used as a beautiful hover effect for image descriptions, photo credits, illustration titles, or whatever else you can think of!

Mix it in with content

Ribbon Wrap can be treated as in inline element to be part of the usual flow of content, or can be positioned in a way to cover content when it’s hovered.
Using Ribbon Wrap’s static mode, it can be treated as a more “traditional” CSS ribbon without any animation.

Social strip

Have a strip of social media icons slide over your chosen element when hovered.

Tool strip

Tool-style icons can be used instead. There’s even a vertical setting.

Features

Pure CSS3 animations

8 colour variations – Easy to make your own!

5 extra styles to go with colours

3 speed settings

Super simple markup

Fantastically stable and flexible – Can be added to almost any pre-existing design

Degrades gracefully in browsers that don’t support CSS3 transitions

Tiny filesize, the core CSS file is only 13.7kb!

Packaged with a set of 19 icons (in both dark and light variations) plus a blank icon