2

Estou desenvolvendo um site com CSS e HTML, mas enfrento um problema. Tenho uma parte desse site como espécie de galeria, e quando uma imagem recebe hover, ela fica maior. O problema é que ela fica embaixo das outras, como na print no fim do post.

/* Grow */
.hvr-grow-shadow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  position: relative;
}
.hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active {
  -webkit-transform: scale(1.8);
  transform: scale(1.8);
  position: relative;
}

CSS:

<center><img class="hvr-grow-shadow" src="img/thumbs/asun.png" style="margin-left:2%;'">
<img class="hvr-grow-shadow" src="img/thumbs/bigode.png" style="margin-left:2%;">
        <img class="hvr-grow-shadow" src="img/thumbs/bradesco.png" style="margin-left:2%;"></center>
<br>
<center><img class="hvr-grow-shadow" src="img/thumbs/parobe.png" style="margin-left:2%;">
        <img class="hvr-grow-shadow" src="img/teste3.png" style="margin-left:2%;">
        <img class="hvr-grow-shadow" src="img/teste3.png" style="margin-left:2%;"></center>

Resultado:

inserir a descrição da imagem aqui

2 Respostas 2

1

Defina um z-index, abaixo:

.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1.8);
  transform: scale(1.8);
  position: relative;
  z-index: 10;
}
16
  • Sem sucesso amigo.
    – MucaP
    Commented 27/01/2016 às 19:34
  • Aqui funcionou sem z-index e com. Commented 27/01/2016 às 19:40
  • Estou com chrome no windows 10, sem sucesso. Continua em baixo
    – MucaP
    Commented 27/01/2016 às 19:42
  • Esses quadrados 200x200 que você desenhou aí é o que ? Commented 27/01/2016 às 19:43
  • Uma img qualquer só porque não tinha o que colocar.
    – MucaP
    Commented 27/01/2016 às 19:44
1

Você está utilizando o nome da classe de modo errado, o seu css está definido como hvr-grow e o seu html está como hvr-grow-shadow. Basta remover o -shadow do seu html e tudo vai funcionar.

Depois, para corrigir o problema do :hover, basta adicionar a propriedade z-index:1, deste modo a img em :hover ficará sempre 1 nível acima das demais.

Lembrando que para que a propriedade z-index funcione, é necessário que você tenha a propriedade de position definida. Porém, como ela já foi definida na classe .hvr-grow, não há necessidade de duplicar a definição no estado de :hover, uma vez que você não está manipulando este comportamento.

.hvr-grow:hover {
    -webkit-transform: scale(1.8);
    transform: scale(1.8);
    z-index:1;
}

Veja um exemplo funcionando: https://jsfiddle.net/z16usfps/

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 .