houver dinamico

[jokita18 0]

Olá.

eu tenho uma imagem , o caminho dessa imagem está a ser passado por php na base de dados. porém agora quero dar houver nessa imagem e substituir por outra. Alguma ideia de como fazer isso dinamicamente? como indico ao css para procurar o caminho da imagem do houver na base de dados mysql ?

 

Obrigado

[Diego - Oliveira 2]

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.

[jokita18 0]

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

[Diego - Oliveira 2]

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.