houver dinamico

Tenta assim:

coloca a primeira imagem em um figure e a segunda no figcaption e no css você só fará a transição no hover.

>
Tenta assim:

coloca a primeira imagem em um figure e a segunda no figcaption e no css você só fará a transição no hover.

Obrigado pela sua resposta

mas como eu farei para a figcaption só aparecer quando existir hover? e como faço para a figcaption ficar mesmo em cima da figure?

desde já agradecido

A ideia seria mais ou menos assim:

fará um figure em posição relativa e o figcaption em posição absoluta todos dois com mesmo tamanho tipo:

figure{

	position:relative;
	width:300px;
	height:300px;
}

figure figcaption{

	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
 opacity:1;
}

ai você colocaria a primeira imagem no figcaption e a que vai aparecer depois no figure, desse jeito:

<figure>
 <img src="endereço da segunda imagem" alt="" />
 <figcaption>
 <img src="endereço da primeira imagem" alt="" />
 </figcaption>
</figure>

e configura o hover dessa forma:

figure figcaption:hover{

 opacity:0;
}

nesse caso acima o figcaption some e a imagem do figure aparece.

Caso queira um efeito menos brusco é só adicionar um transition no código do figure. coloca .3s e ele ficará visualmente mais agradável.