У меня есть галерея изображений ссвязи.

Изменить: вот код, с которым я должен работать:

<div class="gallerypagetabs"><a href="http://costumingdiary.blogspot.com/2013/01/victorian-tardis-purse.html"><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</a><a href="http://costumingdiary.blogspot.com/2012/12/natural-form-victorian-overskirt.html"><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</a><a href="http://costumingdiary.blogspot.com/2012/11/truly-victorian-tv221-1878-tie-back.html"><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</a><a href="http://costumingdiary.blogspot.com/2012/10/truly-victorian-tv121-petticoat-pattern.html"><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</a>..ad naseum..</div>

CSS:

.gallerypagetabs a,.gallerypagetabs p{
    float:left;
    font-size:.80em;
    height:250px;
    padding:10px;
    text-align: center;
    width:200px
}

Я хотел бы показать прозрачное изображение со звездами, когда кто-то наводит курсор на изображение. Поэтому, если человек наводит курсор на изображение «Свободный викторианский узор кошелька», он увидит изображение, скажем, пяти звезд, указывающее, что образец получил оценку 5 из 5 от меня.

Я попробовал оба следующих без удачи. Код показывает изображение при наведении, но оно показывает внизу изображения вместо того, чтобы перекрывать его:

.gallerypagetabs a:hover{
    background-image:url('http://i.imgur.com/IKAXZKz.png');
    background-position:inherit
 }

А ТАКЖЕ

.gallerypagetabs a:hover{
    background-image:url('http://i.imgur.com/IKAXZKz.png');
    background-position:inherit;
    z-index:10
}

Любой совет? Я не хочу использовать Javascript, и яхочу добавить как можно меньше кода в HTML не может изменить HTML, кроме добавления другого класса или идентификатора в начале. Все это должно быть сделано через CSS. Вот как бы я хотел, чтобы это выглядело. Спасибо за вашу помощь!

Код, который работает! (Спасибо, cimmanon!) (Изменены табличные страницы gallery на gallerypatterntab, чтобы изолировать класс от остальной части блога. Снимок экрана из Blogger - да, Blogger любит переписывать такие вещи, как цитаты)