Can i Add an image ontop a
without adding any html tag?

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 enter image description here

Which browsers/versions do you need to support? You can do this with only CSS if you don't need to support IE6/7. — thirtydot, Aug 22 '11 at 11:08
I need them all... but just to know, how could I do it? thanks!! — Toni Michel Caubet, Aug 22 '11 at 11:12
Yeah, I had a feeling you needed to support them. If you didn't need IE6/7, you could have done it using `:before`, in a similar fashion to how it was used [here](http://stackoverflow.com/questions/6884320/simple-css-beforehover-not-working-csslint-no-errors/6884335#6884335). — thirtydot, Aug 22 '11 at 11:15
I can avoid IE6, unfortunatelly not IE7 -interesting link, thanks- — Toni Michel Caubet, Aug 22 '11 at 11:28

score 2 · Accepted Answer · answered Aug 22 '11 at 10:48

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.

so there is not a chance i can Do it with only CSS, right? i need to add the or any element with the bg image, right? thanks! — Toni Michel Caubet, Aug 22 '11 at 10:50

Can i Add an image ontop a without adding any html tag?

1 Answers1

Can i Add an image ontop a
without adding any html tag?