Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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
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!
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.
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:hover{
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!