CODEWITHSUNDEEP
htmlcss
Kyle V.
Kyle V.

Reputation: 4782

Captions on an image with CSS

I'm trying to make "meme"-looking captioned images with CSS using an <img> object and two <p> objects styled with CSS. Right now I have a <div> which contains the <img> and then the two <p>'s. What I want to do is have the picture positioned in the top-left corner of the div and then I set the z-index to -1 and THEN somehow position the two p objects over the image but positioned relative to the top-left corner of the div.

This is so I can set the top: y and left: x values of the p objects such that they will be positioned accordingly relative to the top-left of the div and in turn the image.

But when I try to set position: relative for the p objects there's a problem where the first p is correctly placed but the 2nd p is positioned relative to the first one so even though it's at top: 0, left: 0 it's still lower than it should be.

How can I fix this?

Upvotes: 1

Views: 543

Answers (3)

Thomas Jones
Thomas Jones

Reputation: 4962

check out this jsfiddle:

http://jsfiddle.net/56J8y/1/

relevant CSS

.meme_container {
 position: relative;   
}
.meme_container .top_meme {
    position:absolute;
    top:0;
    left:0;
}
.meme_container .bottom_meme {
    position:absolute;
    bottom:0;
    left:0;
}

​

and the html

<div class="meme_container">
<img src="https://www.google.com/images/srpr/logo3w.png"/>
<p class="top_meme">This is a caption 1</p>
<p class="bottom_meme">This is a caption 2</p>
</div>​

Upvotes: 4

Sidrich2009
Sidrich2009

Reputation: 560

I think you are talking about this situation:

<div>
  <img />
  <p class="first">caption1</p>
  <p class="second">caption2</p>
</div>

Then to do what you want you need to set the positioning of the div to something (relative will generaly not affect your behaviour so its a good choise). Once that is done postioning absolute can be used inside. Absolute refers to the next higher positioned element!! 

div{position:relative};
p{position:absolute};
p.first{top:10px};
p.second{top:20px};

Upvotes: 0

Starx
Starx

Reputation: 78971

One way is to use Pseudo element like :after and :before

Example:

img:after {
   content: "Hello, I am the caption";
}

Upvotes: 1

Related Questions