Ciao ho un immagine che, all'hover del mouse con effetto fade in, deve essere sostituita con un altra immagine e devo visualizzare un testo con sfondo scuro e opacità a 0.5.. Come fare? Al momento sostituisco solo l'immagine così:

codice:
.container {position:relative;
width:200px;
height:150px;
}
.container img {
position:absolute;
top:0;
left:0;
-webkit-transition: opacity 1.1s ease;
transition: opacity 1.1s ease;
}
.container:hover .image1 {
opacity:0;
}
codice:
<div class="container">
<img class="image2" src="img2" alt="">
<img class="image1" src="img1" alt="">
</div>