All for Joomla All for Webmasters

Header com efeito hover

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">&nbsp;</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">&nbsp;</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.