Question 212519 in Html Question posted in
Some basic documentation can be found here.

Html – Hovering over an image to layer it over other images

I have several images on a page, some of them are small so I set it to where when the user hovers over them it scales the picture up. The issue is that the image hovered over is covered by some of the other images. I tried "position: relative" and "z-index" but for some reason that prevents the image from scaling up when it’s hovered over. I even did "position="relative z-index="0px"" in all of the image tags.

Is there a way to scale up the image and have it be to the front of the other images?

img {
  scale: 100%;
}
img:hover{
  scale: 200%;
}

This is how I scale up the images.

img {
  scale: 100%;
position: relative;
z-index: 0;
}
img:hover{
  scale: 200%;
position: relative;
z-index: 1;
}
<img src="https://itissomething.neocities.org/pics/weirdbay/16897348514713799124169404858260.jpg" width="20%" position="relative"
z-index:="0px"/>

This is what I tried, which prevents the scale function from happening.

Edit: The images do scale up now because I missed a semicolon, but they’re still not appearing over all of the other images when hovered over, they’re still covered up by the images that are underneath them.

Tags:

2

Answers


  1. 0

    you are missing a semicolon ";" in your CSS

    img {
  scale: 100%;
  position: relative;
  z-index: 0;
}

img:hover { 
  scale: 200%;    /* <--- added missing semicolon */
  position: relative;
  z-index: 1;
}

    other than that your CSS looks right and your image should change styles and scale up whenever the mouse hovers over any <img> element.

    Login or Signup to reply.
  2. 0

    If you using vs code then use Error Lens extension it will help you and show error in code.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search