text on top of image css

Answer 1

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');
}

Answer 2

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;
}