Ciao a tutti,
ho un problema con l'effetto Hover su immagine.
Non riesco a capire come mai quando passo il mouse sopra l'immagine di sfondo, questa diventi completamente bianca e non trasparente.
Vi riporto il css:
codice:
/*hover CTA */
.container {
position: relative;
width: 100%;
}
.image {
display: block;
opacity:1;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
transition: .3s ease;
background-color:#fff;
}
.container:hover .overlay {
opacity: 1;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
/*hover CTA end*/
e l'html:
codice HTML:
<table width="300" align="center" border="0" cellpadding="0" cellspacing="0" class="mobile-cont">
<tr>
<td>
<div class="container">
<img src="img_kids.jpg" alt="Avatar" width="300" class="image">
<div class="overlay">
<div class="text"> <img src="pappapero.jpg" width="150"></div>
</div>
</div>
</td>
</tr>
</table>
mi sa che mi sfugge qualcosa... riuscireste ad aiutarmi?
Grazie mille,
Mara