Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
É um detalhe bem bobinho porém está me encomodando...
Eu coloquei opacity como hover em uma transição lenta em uma imagem.
a {
opacity: 0.9;
filter:alpha(opacity=90); /* For IE8 and earlier */
transition: opacity 0.3s ease 0s;
} opacity: 1;
filter:alpha(opacity=100); /* For IE8 and earlier */
transition: opacity 0.3s ease 0s;
}Já aconteceu com alguem?
Obs: Só testei no Mozilla.
Como assim? Não entendi, o hover está nas imagens.
Você fala em transição de imagem e coloca somente um código de link.
Não há como analisar assim.
<a href="pagina.html" ><img src="img/foto.jpg" /></a>
É esse codigo numa imagem, so isso...
Mas venho reparando que outros sites que colocaram apenas opacity na imagem ela acaba andando tambem. O melhor jeito eh colocar um background em cima da imagem e ele sim com opacity.
Definir efeito de opacidade, com uso de CSS, no evento hover de uma imagem link NÃO causa deslocamento algum na imagem.
Veja nesse link a prova: http://jsfiddle.net/v2gzg/
O que está causando o deslocamento da imagem não é a opacidade e sim outro fator que só pode ser determinado com o código completo da página.
Você cita "outros sites" que isso acontece. Poste o link para esses "outros sites" e informe qual é a imagem que está deslocando.
Aqui um exemplo do que acontece:
Repare nos quadradinho em baixo da imagem maior depois que sai do hover.
Defina os atributos width e height da imagem e veja se o problema persiste...
Cara, acho que é porque você esta fazendo uma transição e pelo que vejo não ta pegando ela assim na tua div, só quando faz o hover, por isso da uma mexida.
Abraço