Fading between sprite images without calling out image url in CSS - html

Question

Is it possible to fade between sprite images on hover without calling out the image URL in the CSS?
I have a ton of two-image sprite sheets. I want each one to switch on hover, but the CSS will be far too bloated if I have to create a new element for every one with a "background: url(x)".
.frame {
height: 500px;
width: 500px;
overflow: hidden;
}
.sprite {
background: url(image.png) 0px 0px no-repeat;
position: relative;
height: 500px;
width: 500px;
}
.sprite::after {
content: "";
background: url(image.png) -500px 0px no-repeat;
opacity: 0;
transition: opacity 0.35s;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.sprite:hover::after {
opacity: 1;
transition: opacity: 0.35s;
}
I'd rather call them out here:
<div class="sprite frame">
</div>
Here's a JSFiddle of the effect I want, but I want to call out the image URL in the HTML, so I don't have 100 different CSS elements calling out different images.

Answer 1

Hmm. If you are open to a jQuery solution this may help. You can use a "data alt-src" HTML attribute to store two image URLs within one tag, then call a jQuery .hover() function on that class.
HTML:
<img class="xyz" data-alt src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />
jQuery:
var sourceSwap = function () {
var $this = $(this);
var newSource = $this.data('alt-src');
$this.data('alt-src', $this.attr('src'));
$this.attr('src', newSource);
}
$(function () {
$('img.xyz').hover(sourceSwap, sourceSwap);
});
http://jsfiddle.net/LmVRZ/2/
I realize this demo doesn't include the opacity transition but I think it could be built in.