3

Estou querendo fazer esse tipo de efeito na minha galeria de imagem, quando passar o mouse por cima de alguma imagem, ela simplesmente destaca a imagem e as outras escurecem. Segue o modelo: Modelo. Se possível queria via CSS.

1
  • Se sua duvida é como fazer via CSS, da pra fazer usando o seletor :hover. Commented 19/11/2015 às 20:34

1 Resposta 1

4

Só por CSS não dá porque a opacidade se aplica a todos os elementos pertencentes ao carrossel, então tem que ser por JS mesmo.

Para o exemplo no link, usando jQuery:

$('.products_container .product_holder').hover(
    function() {
        $(this).siblings().fadeTo("fast", 0.6);
    }, function() {
        $(this).siblings().fadeTo("fast", 1);
    }
);

Explicando:

  • $(this).siblings() seleciona todos os elementos com a(s) mesma(s) classe(s) no mesmo nível de profundidade de tags;
  • .hover() é o evento de passar o cursor por cima do elemento, e pede dois callbacks: um de entrada na div e um de saída;
  • .fadeTo() cria o efeito de opacidade (no caso, 0.6 para entrada e 1 para saída);

Aqui tem um exemplo funcional.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .