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.
sprite

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


images/
------spr/
----------color-youtube.png
----------color-facebook.png
----------color-twitter.png
----------color-linkedin.png
----------color-amazon.png
----------color-rss.png
----------black-youtube.png
----------black-facebook.png
----------black-twitter.png
----------black-linkedin.png
----------black-amazon.png
----------black-rss.png

Santosh Shah

My name is Santosh Shah and blogs at santosh-shah.com


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.