text on top of image css

Question

I am trying to place a div with text on top of an image but for some reason it doesn't work. My code is:

<div id="pics">     
  <div class="inner">
      <a href=".." target="_blank"><img src=".." class="pic" height="310" width="310"></a>
    <div class="cover">blah blah</div>      
  </div>
</div>

my CSS is:

 #pics{  
  overflow:hidden;
  display:block;
}

.inner a{
  position:relative;
  margin:3px;
  padding:10px;
  top:10px;
}

.inner{
  position: relative;
  display: inline-block;
}

.cover{  
  position: absolute;
  background-color: black;
   color: white;
  left: 0;
 right: 0;
 bottom: 0;
 top: 0px;
}

I have tried many things but it doesn't seem to work. I might have messed up my cs somewhere

jackJoe · Accepted Answer · 2013-10-29 18:36:46Z

4

That's because you're targetting an ID and not a class.

In other words, in the CSS you have the definition for an ID (#cover) and the HTML code has a class:

<div class="cover">blah blah</div>

Either change the HTML to have an ID:

<div id="cover">blah blah</div>

or change the CSS to target the class name:

.cover{  
  position: absolute;
  background-color: black;
  color: white;
  width: 100%;
  height: 100%;
  border-style: solid 5px;
  top: 0px;
}

UPDATE:

You are giving the .cover a width and height of 100%, but absolute positioned elements don't really "understand" that, so I suggest changing it to: (place the left, bottom and right to the edges, this will fit the div as 100% width and height of the relative parent)

.cover{  
  position: absolute;
  background-color: black;
  color: white;
  left: 0;
  right: 0;
  bottom: 0;
  border-style: solid 5px;
  top: 0px;
}

edited Oct 29, 2013 at 18:36

answered Oct 29, 2013 at 18:28

jackJoe

11.1k8 gold badges54 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rakim Over a year ago

It works better now but the size of the "cover" div is greater than that of the picture. any idea why this is happening? I just fixed it using different values for top,bot,left,right

T3 H40 · Accepted Answer · 2013-10-29 18:27:00Z

0

How about setting the picture as background via the background-image: attribute. You then could make your div clickable with <div onclick="window.location="url";>

In detail your css would look like this:

.image {
  width:310px;
  height:310px;
  background-image:url('pathtoimage');
}

answered Oct 29, 2013 at 18:27

T3 H40

2,8138 gold badges45 silver badges55 bronze badges

Collectives™ on Stack Overflow

text on top of image css

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related