O efeito que vou ensinar para os 22kos hoje é esse efeito desta página aqui (clique). Sabe quando você passa o mouse no gato do Axl Rose e aí aparece uma outra imagem em transição? Então, para ter esse efeito, faça o seguinte:
1. Adicione este código no seu CSS:
.imgheader {
width: 250px;
height: 375px;
background: url('http://site.com/imagem.png');
transition-duration: 1s;
-moz-transition-duration:1s;
-webkit-transition-duration:1s;
-o-transition-duration:1s;
-webkit-transition: all 0.5s ease 0s;
-moz-transition:All 0.1824s ease-in-out;
transition: all 0.6s ease 2s;
-o-transition: all 0.6s ease 2s;
margin-bottom: 2px;}
.imgheader:hover {
width: 250px;
height: 375px;
background: url('http://site.com/imagem2.png');
margin-bottom: 2px;}
Lembrando que width é largura, height é altura e no lugar de http://site.com/imagem.png e http://site.com/imagem2.png você deve colocar exatamente o link das imagens que você hospedou. Em imgheader:hover vai ficar a imagem que você quer que apareça exatamente quando você passar o mouse por cima da primeira imagem (imgheader). E é bom avisar que em imgheader e imgheader:hover o tamanho e a largura da imagem devem ser os mesmos, como mostra no próprio CSS que eu disponibilizei, para dar certinho, ok? Se não fica tudo bagunçado. E altere a altura e largura de acordo com o tamanho das imagens (que deve ser igual) que você vai colocar no código. Se a imagem for 500×700, coloque em width: 500px e em height: 700px, entenderam?
Obs.: talvez o efeito de transição em fade não funcione no Firefox nem no Safari, ou seja, quando você passar o mouse, a imagem vai mudar, mas não vai mudar com transição fade.
2. Cole o código abaixo onde você quiser:
<div class="imgheader" width="LARGURA" height="ALTURA"> </div>
Obs.: A largura e a altura que você vai mudar nesse segundo código tem que ser exatamente igual à que você colocou no primeiro código, o do CSS. Exemplo:
<div class="imgheader" width="250" height="375"> </div>
“E como faz para colocar o texto que você colocou quando passa o mouse na imagem do Axl?” Aquele texto é basicamente uma imagem! Eu pintei o fundo de branco e escrevi em cima.
Bem, é basicamente isso. Qualquer dúvida, por favor, consultem meu ask-me.