CODEWITHSUNDEEP
htmlcss
Thingamajig
Thingamajig

Reputation: 4465

How can I put a div over an image?

I am trying to put a div over an image so that it acts like a caption, directly ontop of the image.

Sometimes the caption is longer than other times so I can't set a specific margin-top:-px because sometimes the height of the caption is longer.

I tried this and the background of the link (black) does not show, also like I just stated, the caption height changes so this method is garbage: 

 <div>  

  <img src = "<? echo $image_url ?>" style="float:left;min-width:220px;max-width:220px;">
   <a href="LINK" ><div style="width:210px;background-color:black;color:white;bottom:0;margin-top:-20px;padding-left:10px;padding-top:10px;font-size:16px;"><? echo $title ?></div></a>

 </div>

Upvotes: 10

Views: 45690

Answers (5)

Hitesh Sahu
Hitesh Sahu

Reputation: 45062

<div style="position:relative;">  

<img  style=" border-radius: 10px 10px 10px 10px; 
              width: auto;
              height: 250px"

       src = "https://images.pexels.com/photos/904276/pexels-photo-904276.jpeg?auto=compress&cs=tinysrgb&h=350" 
      >

  <div style="position:absolute;
               width:100%;
               background-color:rgba(255, 255, 255, 0.3);
               color:white;
               bottom:0;
               left:0;
               padding-left:15px;
               font-size:17px;
               z-index:5;">
    <h3 style ="color:white">Title</h3>
    <h4 style ="color:white">Sub Title</h4>
    <p> Lorel Ipsum Blah blah </p>
  </div>

</div>

Result:

Demo

See the Pen zJPvOB by Hitesh Sahu (@hiteshsahu) on CodePen.

Upvotes: 0

Mike
Mike

Reputation: 1544

Try something like this:

<div style="position:relative;">  

  <img src = "<? echo $image_url ?>" style="min-width:220px;max-width:220px;">
   <div style="position:absolute;width:210px;background-color:black;color:white;top:0;left:0;padding-left:10px;padding-top:10px;font-size:16px;z-index:5;"><a href="LINK" ><? echo $title ?></a></div>

</div>

You had a few things going on:
1) You had a div inside an 'a' tag. You shouldn't put block level elements (like divs) inside inline level elements (like a's).
2) Remove the float from the image, set your outer div's position to relative and your inner div's position to absolute, then absolutely position it to the top of the containing div. From there, add a z-index greater than 0 to the inner div for good measure, to ensure it stays stacked above the image.

Upvotes: 17

Krishna Kumar
Krishna Kumar

Reputation: 2121

Add position:absolute; left:0px;top:0px;z-index: 2; to current div, and add style="position:relative;" in the parent div

<div style="position:relative;">  

  <img src = "<? echo $image_url ?>" style="float:left;min-width:220px;max-width:220px;">

<a href="LINK" ><div style="position:absolute;z-index: 2;left:0px;top:0px;width:210px;background-color:black;color:white;bottom:0;padding-left:10px;padding-top:10px;font-size:16px;"><? echo $title ?></div></a>

Upvotes: 3

ews2001
ews2001

Reputation: 2187

This code should work for what you're trying to do:

<div style="background: transparent url('<? echo $image_url ?>') no-repeat 0 0; padding: 10px 0 10px 10px; width: 200px;"><a href="LINK"><? echo $title ?></a></div>

Upvotes: 1

Himanshu Jaju
Himanshu Jaju

Reputation: 1589

Use CSS z-index property to align text above image. The element with higher z index appears on the top.

Upvotes: 1

Related Questions