Following is a collection of image hover effects using a single bounce in icon. You will find these ideal if you simply want to add a little life to those linked static images. Each snippet includes some alternative colors which can be applied by adding the color class name to the containing figure element. Icons are from the excellent IonIcon set. To edit the icon simply edit the class to the 'i' element with the icon class of your choice. For the full list of icons check out http://ionicons.com.

Please note that we use CSS properties which only work in modern browsers.

See the Pen #1350 - Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

See the Pen #1371 - Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

See the Pen #1320 - Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

See the Pen #1300 - Image hover by LittleSnippets.net (@littlesnippets) on CodePen.

See the Pen #1280 - Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

See the Pen #1251 - Image hover with single icon by LittleSnippets.net (@littlesnippets) on CodePen.

See the Pen #1233 - Image with icon on hover by LittleSnippets.net (@littlesnippets) on CodePen.

See the Pen #1225 - Image hover with single icons by LittleSnippets.net (@littlesnippets) on CodePen.

See the Pen #1215 - Image with icon on hover by LittleSnippets.net (@littlesnippets) on CodePen.

See the Pen #1205 - Image hover effect with icon by LittleSnippets.net (@littlesnippets) on CodePen.

Izmir - ImageHover CSS Library

Izmir is a mini CSS library allowing you to quickly create beautiful image hover elements. Packed with a host of styling classes and custom properties, Izmir allows you total control and almost limitless possibilites.

Turin - ImageHover CSS Library

Turin is the second in a series of mini CSS ImageHover libraries, this time with a transparent border effect on hover These libraries allow you to create beautiful image hover elements quickly and easily.