Efeito muito bacana

[WBS DIGITAL 6]

Alguém sabe o nome desse efeito no site: http://novation.be/nl

Muito bacana, precisando estudar ele, mas não sei como chama.
Desde já, obrigado

[Dian Carlos 29]

Isso ai é um efeito de transformação CSS3 chamado scale();

 

É tranquilo de fazer, você só tem que chamar ele no estado :hover da div.

 

Exemplo:

 

#suadiv {

//Transição para dar o zoom suave
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-khtml-transition: all .2s ease;
transition: all .2s ease;
}

#suadiv:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-khtml-transform: scale(1.1);
transform: scale(1.1);
}

 

Olha esse site aqui (http://ervattiimobiliaria.com.br/), eu fiz ele e usei esse efeito nos imóveis, só passar o mouse em cima

 

Dá uma olhada no código ai e boa sorte..

[WBS DIGITAL 6]

Dian Carlos, muito obrigado pela ajuda, alcancei o esperado aqui graças a sua força. Fica meu agradecimento e reconhecimento. Valeu!

 

 

Mais uma duvida:

 

tenho o seguinte html:

 

 

<div class="mostra"><a href="#"><img src="fotos/img1.jpg"/></a></div>

quero que ao passar o mouse, além do efeito scale q ta acontecendo com a imagem, ela mostre também no efeito hover um texto referente à imagem, tentei, mas não conseguí.

 

css:

.mostra {float: left;width:20%;height:250px;overflow:hidden}.mostra img{-webkit-transition: all .2s ease;-moz-transition: all .2s ease;-khtml-transition: all .2s ease;transition: all .2s ease;position:relative;top:-50%;left:-50%;}.mostra img:hover{-webkit-transform: scale(1.1);-moz-transform: scale(1.1);-khtml-transform: scale(1.1);transform: scale(1.1);}

 

Alguém consegue me ajudar?

[Dian Carlos 29]

Bem, você pode fazer o seguinte.

 

Faça a div com o texto do jeito que você quer que apareça na tela e depois deixe ela com display:none.

 

Depois no estado :hover da imagem você vai selecionar ela e deixar display: block

 

Ex.:

 

.mostra {
position: relative;

float: left;

width:20%;
height:250px;

overflow:hidden
}

.divtexto {
position: absolute;

top: -10px;
right: -10px;

display: none;
}

.mostra img:hover .divtexto { display: block; }

 

No site que te passei (http://ervattiimobiliaria.com.br/), eu faço isso ao contrario, quando passo o mouse em cima da foto a div com o status do imóvel some, e quando tira o mouse ela volta.

 

Para criar efeitos assim use CSS3, transition, opacity, etc.

 

Bacana também é efeitos de fadeIn, fadeOut, animate com CSS3 e jQuery.

 

Boa sorte ai man..

[WBS DIGITAL 6]

Muito obrigado, já tinha conseguido fazer aqui, mas agradeço pela ajuda, certamente ajudou muito.