How to put links in images

Question

I have a requirement to like this image

As you can see in the 1st image there is a link called review and it is at center with black background.I wanted to do like that way and I did this way But the link is coming at top.How can I make as per the image.

Answer 1

Do it in this way

.outer {
    width: 89px;
    height: 89px;
    -webkit-box-shadow: 0px 0px 10px #4d4d4d;
    -moz-box-shadow: 0px 0px 10px #4d4d4d;
    box-shadow: 0px 0px 10px #4d4d4d;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -khtml-border-radius: 8px;
    border-radius: 8px;
    border: solid white 3px;
    overflow: hidden;
    padding: 10px;
}

.image {
    background: red;
    padding: 0;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -khtml-border-radius: 8px;
    border-radius: 8px;
    width: 80px;
    height: 80px;
    overflow: hidden;
}

.bg {
    background: url("http://www.computerhope.com/logo.gif");
    width: 69px;
    height: 69px;
}

    .bg a {
        margin-top: 40px;
        padding-left: 10px;
        color: #ffffff;
    }

And

<div class="outer">
    <div class="image">
      <div class="bg"><br />
        <a href="http://www.google.com">
          Review
        </a>
      </div>
    </div>
</div>

See this code in jsfiddle.

Answer 2

<img src="http://lorempixel.com/200/200/" />
<div><a href="#">Some Text</a></div>
<img src="http://lorempixel.com/200/200/" />
<div class="div"><a href="#">Text</a></div>

And Here IS CSS

div {
    position:absolute;
    top:100px;
    left:100px;
    background:black;
    opacity:0.5;
}
.div {
    position:absolute;
    top:100px;
    left:300px;
    background:black;
    opacity:0.5;
}
a {
    text-decoration:none;
    color:red;
}

have a look at this fiddle demo