Image always on top when receiving hover effect

Navigation
2

I'm developing a website with CSS and HTML, but I'm facing a problem. I have a part of this site as a kind of gallery, and when an image receives hover , it gets bigger. The problem is that it stays underneath the others, like in print at the end of the 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>

Result:

    
asked by anonymous 27.01.2016 / 20:28

2 answers

1

Set a z-index , below: 

.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1.8);
  transform: scale(1.8);
  position: relative;
  z-index: 10;
}
    
27.01.2016 / 20:32
1

You are using the class name in the wrong way, its css is set to hvr-grow and its html is hvr-grow-shadow . Just remove -shadow from your html and everything will work.

Then, to correct the problem of :hover , just add the z-index:1 property, thus img in :hover will always be 1 level above the others.

Remembering that for the z-index property to work, you must have the position property set. However, since it has already been defined in the .hvr-grow class, there is no need to duplicate the definition in the :hover state, since you are not manipulating this behavior. 

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

See a working example: link

    
27.01.2016 / 20:50
The PN0 control number V0102 does not correspond to the IBGE municipalities code. How to join the banks? Include in the head tag Djanto Templates