Rollover Image problem

A CSS sprite is one file that has multiple images in it, well compressed, small, and when set up right you can show just one part of the file (if or not if hovered)…when you deliver a small file used many times on a busy site you decease the number of times a file has to be requested from the server increasing site performance..the css required is very tiny and also helps…

CSS Sprites

See this also:

https://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_nav

yes i know what a sprite is,
here is the current sprite code ive tried working with.

in my page.php
<a href="#" class="styleangel"><img src="https://www.mixxshuz.com/wp-content/themes/twentytwelve-child/images/Angel.jpg</a>

and the css

.styleangel {
	display: inline-block;
	position: relative;
	text-indent: -9999px;
	width: 290px;
	height: 290px;
	background: url('https://www.mixxshuz.com/wp-content/themes/twentytwelve-child/images/Angel.jpg') no-repeat;
}

.styleangel:after {
	content: "";
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background: url(/images/Angel.jpg) no-repeat;
	background-position: -290px 0;
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	-moz-transition:    opacity 0.5s;
	-o-transition:      opacity 0.5s;
}
.styleangel:hover:after {
	opacity: 1;
}

it shows up but its rollover function isnt working
the site is mixxshuz.com

Start with background position of default zero. Then on hover, add background top position of -295px;

background-position: 0 -295px;

thank you so much ??
you have saved me a few time already andrew lol