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 Resposta
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 nadiv
e um de saída;.fadeTo()
cria o efeito de opacidade (no caso, 0.6 para entrada e 1 para saída);