Descrição de imagem não aparecendo no local correto ao passar o mouse

krampusss
(usa Outra)

Enviado em 24/07/2014 - 17:06h

Olá galera, tudo bom? Estou precisando de uma ajuda com urgência, pois estou a mais de 2 dias tentando e não consegui, alguém pode me ajudar? La vai o problema: Ao passar o mouse sobre as imagens das filiais, (estão abaixo das promoções) deve-se exibir em cima delas a descrição que contém nome, endereço, telefone, etc. Porém, só está funcionando exclusivamente na primeira imagem. Caso passe o mouse em cima das outras imagens, a descrição aparece, porém, em cima da primeira.

O HTML e o CSS estão assim:

http://codepen.io/raphaelpalimontes/pen/CHdws

Se puder me ajudar, agradeço!

jocajuni
(usa Debian)

Enviado em 24/07/2014 - 18:58h

<style>
.nossasfiliais a{
text-decoration: none;
color: #FFF;
}
.filiais{

}
.slidefiliais {
margin: 0;
float: left;
position: relative;
width: 100%;
margin: 0 auto;
}
.slidefiliais a {
text-decoration: none;
position:relative;
display: block;
float:left;
}
.slidefiliais a:hover {
cursor: pointer;
}
.slidefiliais a img {
margin: 0;
border: none;
padding: 10px;
background: #fff;
}

.slidefiliais .desc{
display:none;
z-index:100;
}
.slidefiliais a:hover .desc{
display: block;
font-size: 1.2em;
padding: 10px 0;
background: #111;
filter:alpha(opacity=75);
opacity:.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/
color: #fff;
position: absolute;
bottom: -100px;
left: 11px;
border-top: 1px solid #999;
width: 207px;
min-height:100px;

}
.slidefiliais a:hover .desc strong {
display: block;
margin-bottom: 5px;
font-size:1.5em;
}
.clear{
clear:both;
}


</style>

<div id="filiais" align="center">
<div class="slidefiliais">
<a href="#">
<img src="logo.jpg" alt="Daim Graffiti" width="200"/>
<span class="desc">
<strong>Atacado</strong>
teste
<br/>Tel.: (38) 3229-1400
</span>
<div class='clear'></div>
</a>
<a href="#">
<img src="logo.jpg" alt="Daim Graffiti" width="200"/>
<span class="desc">
<strong>Atacado</strong>
Teste
</span>
<div class='clear'></div>
</a>
<a href="#">
<img src="logo.jpg" alt="Daim Graffiti" width="200"/>
<span class="desc">
<strong>Atacado</strong>
Teste
</span>
<div class='clear'></div>
</a>
<a href="#">
<img src="logo.jpg" alt="Daim Graffiti" width="200"/>
<span class="desc">
<strong>Atacado</strong>
Teste
</span>
<div class='clear'></div>
</a>
</div>
</div>