Blog for web designers

sass sprite hover image

In this code you will be able to use simple names as the class and use a image as icon and another image when hover over the icon. The sass sprite hover image is a bit trick with sass which we will cover in this small article.

SASS sprite hover image code

@each $soc_con in youtube, facebook, twitter, linkedin, amazon, rss {
	.#{$soc_con} {
		@include spr-sprite(#{'black-'}$soc_con, true);		
		&:hover {
			@include spr-sprite(#{'color-'}$soc_con);

HTML SASS sprite hover image code

<a class="youtube" href="" target="_blank" title="Youtube">Youtube</a>
<a class="facebook" href="" target="_blank" title="Facebook">Facebook</a>
<a class="twitter" href="" target="_blank" title="Twitter">Twitter</a>
<a class="linkedin" href="" target="_blank" title="LinkedIn">LinkedIn</a>
<a class="amazon" href="" target="_blank" title="Amazon">Amazon</a>
<a class="rss" href="" target="_blank" title="RSS">RSS Feed</a>

Images sprite folder tree


Santosh Shah

My name is Santosh Shah and blogs at

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.