Sprite Fade on Hover (Less CSS mixin)

gistfile1.css

/* For Less CSS image replacement fade on hover transition with SPAN tag.
This uses the Helpless Less library for opacity and transition (#hl).
 */

#llama {

	.spriteHoverFade(@width: 10px, @height: 10px, @imageURL: '', @offsetX: 0px, @offsetY: 0px, @hoverOffsetX: 50px, @hoverOffsetY: 50px) {
		display: inline-block;
		position: relative;
		text-indent: -9999px;
		width: @width;
		height: @height;
		background-image: url("@{imageURL}");
		background-position: ~"@{offsetX}" ~"@{offsetY}";
		background-repeat: no-repeat;
		
	
		span {
			position: absolute;
			top: 0; 
			left: 0; 
			bottom: 0; 
			right: 0;
			background-image: url("@{imageURL}");
			background-position: ~"@{hoverOffsetX}" ~"@{hoverOffsetY}";
			#hl.opacity(0);
			#hl.transition(opacity, 0.5s, ease);
		}
	
		&:hover span {
			#hl.opacity(1);
		}
	
	}

}

/* Usage */
.arrow {
	#llama.spriteHoverFade(50px, 50px, '../img/sprites.png', '0px', '0px', '-50px', '0px');
}