Caroucel de imagens com mouse hover

[matheusmarson 0]

Galera

Preciso de um caroucel de imagens bem semelhante a este aqui http://www.jqueryscript.net/demo/jcoverflip/

(zoom na imagem principal) mas que para destacar a imagem principal não seja necessário o click do mouse e sim o evento hover. Ou seja o mouse ficou em cima ele já da o zoom

Alguém conhece algum, ou saberia me dizer como fazer para alterar este que tenho o click?

Desde já agrade a todos

Abraços

[Guilherme Luiz 41]

A ideia é aplicar um :hover na div que tem a imagem...

Provavelmente esse codigo do link tem a propriedade da div imagem pequena e depois tem a classe css da div ativa/clicada que aumenta o tamanho da imagem..

Aqui mando uma ideia de como mudar no tamanho da imagem com o passar do mouse...

.img_carrossel {
        width:20%;
        height:20%;
}

.img_carrossel:hover{
         width:40%;
         height:40%;
}

A grosso modo imagino algo desse tipo que da pra desenvolver bastante, aplicando sombras, transição, efeitos de fade e varias outras coisas...

Mostra a sua ideia de codigo aqui para nós e vamos trocando experiência!

[L. Henrique 179]

Matheus,

Se você redimensionar uma imagem dentro de uma tag <img>, é muito provável que seu layout vá começar a quebrar. Pra isso você possui a propriedade background-image que deve ser aplicada em uma div com altura e largura definidos.

Exemplo:

<div class="imagem"></div>

.imagem {
   width: 300px;
   height: 300px;
   background: url('imagem.jpg') no-repeat center center;
   background-size: cover;
}

Dessa forma você pode aumentar o tamanho da sua imagem sem influenciar o wrapper, utilizando a propriedade background-size.

Exemplo:

.imagem:hover {
   background-size: 200%;
}

Abraços!

[henry_osn 0]

Olá, estou utilizando o plugin Jquery Zoom (www.jacklmoore.com/zoom) para fazer o efeito quando o mouse é passado sobre a foto.

E estou utilizando o carrossel de fotos do Bootstrap para o slideshow.

O problema é que na transição os CSS se sobrepõe deslocando a segunda imagem para baixo. Veja o que eu quero dizer: www.cllb.com.br/_novo/pt/projetos/10-residencial/142-klubhaus-cajamar

Na transição o script do zoom precisa ser desativado, mas não sei como fazer.

Alguma dica?

Obrigado.