How to display image over image on hover with css - css

Question

I have a gallery of images with links.
Edit: Here's the code I have to work with:
<div class="gallerypagetabs"><img alt="Free Victorian Purse Pattern" src="https://lh3.googleusercontent.com/-m4y6eS2KGRQ/Ug7TKD3sbYI/AAAAAAAAHNc/6qoeuGedjOY/s200-c/free-victorian-purse-pattern-1.jpg"><br>Free Victorian Purse Pattern<img alt="Natural Form Victorian Overskirt" src="https://lh3.googleusercontent.com/-ZrTDaXEOiiU/US__mPzz3dI/AAAAAAAADWQ/eBm3tO3P8oI/s200-c/IMG_5482%255B6%255D.jpg"><br>Natural Form Victorian Overskirt<img alt="Truly Victorian TV221 1878 Underskirt Pattern Review" src="https://lh4.googleusercontent.com/-GmrRTxJ5NGY/UKfO_SQzymI/AAAAAAAAAHA/A9qx6czpyJk/s200-c/Truly-Victorian-TV221-1878-Tie-Back-%255B1%255D%255B4%255D.png"><br>Truly Victorian TV221 1878 Underskirt Pattern Review<img alt="Truly Victorian TV121 Petticoat Pattern Review" src="http://lh4.ggpht.com/-qTsclIxCTKY/UH7fK3jqKII/AAAAAAAAodI/2GaQOVrGuuA/s200-c/Truly%252520Victorian%252520TV121%2525201879%252520Petticoat%252520with%252520Detachable%252520Train%25255B6%25255D.png?imgmax=800"><br>Truly Victorian TV121 Petticoat Pattern Review..ad naseum..</div>
CSS:
.gallerypagetabs a,.gallerypagetabs p{
float:left;
font-size:.80em;
height:250px;
padding:10px;
text-align: center;
width:200px
}
What I'd like to do is show a transparent image with stars on them when someone hovers over the image. So if a person hovers over the Free Victorian Purse Pattern image, they'll see an image of - let's say - five stars indicating that the pattern has received a rating of 5 out of 5 stars from me.
I've tried both of the following with no luck. The code shows the image on hover, but it shows at the bottom of the image instead of overlapping it:
.gallerypagetabs a:hover{
background-image:url('http://i.imgur.com/IKAXZKz.png');
background-position:inherit
}
AND
.gallerypagetabs a:hover{
background-image:url('http://i.imgur.com/IKAXZKz.png');
background-position:inherit;
z-index:10
}
Any advice? I don't want to use Javascript, and I want to add as little coding to the HTML as possible cannot change the html other than adding another class or id at the beginning of it. It all has to be done through CSS. Here's how I'd like it to look. Thanks for your help!
The code that WORKS! (Thanks cimmanon!)
(Changed gallerypagetabs to gallerypatterntab to isolate the class from the rest of the blog. Screenshot from Blogger - yeah Blogger likes to rewrite things like quotations)

Answer 1

You can use a pseudo element for this purpose. No need for extra markup.
http://cssdeck.com/labs/anxnrkhr
<img src="http://placekitten.com/100/100" />
a {
position: relative;
display: inline-block;
}
a:hover:before {
content: '';
display: block;
background: rgba(255, 0, 0, .5); /* your background */
width: 20px; /* image width */
height: 100px; /* image height */
position: absolute;
top: 0;
right: 0;
}

Answer 2

This is untested, but I think you want something like:
.gallerypagetabs a, .gallerypagetabs img{
position:absolute;
z-index:1;
}
.gallerypagetabs a:hover{
z-index:2;
}
.gallerypagetabs{
position:relative;
}
This is untested, but hopefully gives you an idea about how to realize the effect you are after.

Answer 3

Putting the image on the anchor's background isn't going to work because the image will hide it.
You can add an element containing the stars in an absolute position inside the anchor:
<a href="http://costumingdiary.blogspot.com/2013/01/victorian-tardis-purse.html">
<img src="https://lh3.goog...An-purse-pattern-1.jpg" alt="Free.. Pattern">
<br>
Free Victorian Purse Pattern
<i class="stars"></i>
</a>
And a CSS similar to this (all numbers can vary):
a {
position: relative;
}
.stars {
background-image:url('http://i.imgur.com/IKAXZKz.png');
background-position:inherit;
width: 20px;
height: 80px;
position: absolute;
right: 10px;
top: 10px;
display: none;
}
a:hover .stars {
display: block;
}
P.S - <br /> is supposed to be self-closing. And it's better not using it only to make a new line after the image, but maybe give the image this style:
a img {
display: block;
}