Question

lets say we have

<div class="picture"><img class="picture_thumb" src="path" /> </div>

And i’d like to use CSS to add an image z-index higher to .picture (it’s basically an magnifying glass Icon so I can see it on top of .picture_thumb)

Any chance?

Thanks a lot

PD: it would be like instead of a background, a Front-ground
-EDIT-
An image so you can understand better

Answer 1

There’s no such thing as front-ground.

You’d have to do something like this:

<div class="picture">
  <img src="images/picture.jpg" alt="Picture" />
  <img class="magnifier" src="images/magnifier.jpg" alt="Maginfy" />
</div>

.picture {
  position: relative;
  width: 100px;
  height: 100px;
}

.magnifier {
  position: absolute;
  bottom: 0px;
  right: 0px;
  z-index: 1000;
}

You could also do it with javascript if you didn’t want to add the magnifier image to each picture div.