Image caption hover effects with CSS3 and HTML5

A tutorial on how to create some subtle and modern caption hover effects with CSS3 and HTML5.

Try caption hover effects / transforms

In this tutorial we’re going to create stunning and modern Image Caption Hover Effects using CSS3 and HTML5

Today we want to show you how to create some simple, yet stylish hover effects for image captions. The idea is to have a grid of figures and apply a hover effect to the items which will reveal a caption with the title, author and a link button. For some of the effects we will use 3D transforms. The aim is to keep the effects subtle and provide inspiration for many different variations.

Various caption hover effects
Various caption hover effects

Some features:

– built only with CSS3 and HTML5

– touch Devices supported

– very nice effects using CSS3 3D Transforms

– easy to customize via CSS and HTML

– 7 different effects to fit your requirements

Demo:

http://tympanus.net/Tutorials/CaptionHoverEffects

Full tutorial:

http://tympanus.net/codrops/2013/06/18/caption-hover-effects

See also:

http://javascript-html5-tutorial.net/2015/12/02/hcaptions-js-animated-jquery-image-caption-overlays.html

Enjoy!

Share:Share on Facebook0Share on Google+1Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1