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.