How to place text over different images with different positions?


Tags: html,css,image,positioning,css-position

Problem :

I know how to place text over 1 image by giving the image position:relative; and the text position:absolute; and then position the text where I want. My problem is that I have a list of images on which I want to place a text. The solution I mentioned doesn't work, because when I try to position the text, all of them will have the same position and I see only one text. I'm sure you understand what I mean. Is there a solution for this only by using CSS?

edit: I should mention that this is a vertical list and all the images have the same left. edit 2: They the text and the image are already in a container!

Thanks.



Solution :

You should nest your image and Text in a container(a div). You then position the text in the div and the image in the div. This should solve your problem.

here is my working example:

http://jsfiddle.net/kqYcT/

.image_container{ position: relative; }

.image_container img{
   position: relative;
   width: 200px;
   height: 100px;
   z-index: 1;
 }

.text{
   position:absolute;
   top: 70px;
   left: 35px;
   color: white;
   z-index: 2;
  }

    CSS Howto..

    How To Style background-image CSS

    Basic concept for how javascript replaces an html input with something interactive?

    How to read this hover syntax in css?

    how to disable drupal7 system css files?

    How do I get this menu to stay top right of the image on hover? - CSS, jQuery

    How do you put