Always top image when receiving the Hover effect

Asked

Viewed 189 times

2

I am developing a site with CSS and HTML, but I face a problem. I have a part of this site as a kind of gallery, and when an image gets hover, it gets bigger. The problem is that it stays under the others, as in the 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>

Upshot:

inserir a descrição da imagem aqui

html css

2 answers

1


Define a z-index, down below:

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

  • Unsuccessful friend.

  • Here it worked without z-index and with.

  • I’m with Chrome in windows 10, unsuccessful. Continue down

  • Those 200x200 squares you drew there is what ?

  • Just because I didn’t have anything to put on.

  • Class name is not matching the class name in the image.

  • Where? In what part?

  • Class name in CSS hvr-grow. Class name on tag img => hvr-grow-shadow.

  • Really, but even so I added in hvr-Grow-shadow and it didn’t work the same

  • https://jsfiddle.net/q3xm2tv0/

  • I resolved adding position: Absolute; and z-index: 10; no hvr-Grow-shadow.

  • Your code is not working @Zoom -> https://jsfiddle.net/q3xm2tv0/1/ I set the edges.

  • @Mucap see my answer.

  • Dude, but you put the z-index: 10; that I said ? I put it here and it worked. Look... https://jsfiddle.net/q3xm2tv0/2/

  • @Celsomtrindade, your answer is the same as mine, has changed absolutely nothing...

  • @Zoom the explanation was different and your fiddle didn’t work.

Show 11 more comments

1

You are misusing the class name, your css is defined as hvr-grow and its html is as hvr-grow-shadow. Just remove the -shadow of your html and everything will work.

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

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

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

See an example working: https://jsfiddle.net/z16usfps/

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.