Помогите разобраться с Hover

[web-in]

Всем привет, возникла трудность подскажите как можно ёё исправить.
Проблема вот такая: при на ведении на картинку (на которой сверху наложен фон z-index:1) фон пропадает, и также на картинке имеется текст а при наведении на текст фон снова появляется.
Подскажите как можно сделать чтобы фон не появлялся при наведении на текст.

css

.articles-top-hits {
float:left;
margin:2px;
width:49.3775%;
position:relative;
display:block;
}
.articles-top-hits .bg {
background: url("../images/post_pr_bg.png") repeat-x scroll 0 -40px transparent;
bottom: 0;
height: 160px;
left: 0;
position: absolute;
width: 316px;
opacity:0.66;
z-index:1;
}
.articles-top-hits img {display:block;}
.articles-top-hits h5 {
max-width:80%;
padding:0;
left:20px;
position:absolute;
font:italic bold 18px/18px Georgia;
text-shadow: 0 1px 2px black;
bottom:20px;
z-index:2;
}
.articles-top-hits h5 a {
text-decoration:none;
border:none;
color:#fff;
}
.articles-top-hits p {display:none;}
 
 
/**** HOVER ****/
.articles-top-hits .bg:hover {opacity: 0;
-moz-transition-duration: 0.5s;
-moz-transition-property: opacity;}

html

<div class="articles-top-hits">
    <h5><a href="/">Текст</h5>
    <span class="bg"></span>
    <img  src="95f2060b560b122a351dc419b9c8a2ec38.jpg">
</div>

Заранее спасибо!

 

[zek24]

Задайте для
.h5 z-index: 1
а остальные z-index: увеличьте на 1

 

[web-in]

В таком случае по логике вещей все в норме, но тогда текст будет принимать часть фона (т.е. будет серый как ".articles-top-hits .bg")

К сожалению до сих по ничего не получилось возможно кто нибудь сможет подсказать.
Код здесь Для просмотра ссылки Войди или Зарегистрируйся

Добавлено zek24: дабл-постинг! есть кнопка редактировать

 

[BaNru]

.articles-top-hits .bg:hover, h5:hover + .bg {
  opacity: 0;
  -moz-transition-duration: 0.5s;
  -moz-transition-property: opacity;
}

Для просмотра ссылки Войди или Зарегистрируйся