On hover link will appear on image

Question

I want to my link will appear on center of image if the image is hover. How to do it? I prefer to use pure css, but if need jquery is no problem.

<div class="container">
<img src="an_img.jpg">
<div> <a href="a link">i want this link on center</a> </div>
</div>

CSS:

<style>

    div.container { width: 200px; height: 200px; position: relative; }
    div.container img { width: 100%; height: 100%; position: absolute; top: 0; }
    div.container div { width: 100%; position: absolute; top: 0; display: none; }
    div.container img:hover + div { display: block; }
    div.container div:hover { display: block; }
 </style>

Just like this: http://jsfiddle.net/gye6f9yh/

But I want at center vertical and horizontal of the image.

Answer 1

You can use the :hover property to make your link visible.

First make the link invisible in CSS:

.product a {
    display: none;
}

Then make it visible again when you hover over it:

.product:hover a {
    display: block;
}

Answer 2

Use HTML MAP TAG

 <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun"> <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury"> <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus"> </map> 

Answer 3

this should help!

  .container{ position:relative; } .container div { display:none; border:solid ; } .container img:hover + div{ display:block; position:absolute; left:11%; top:45%; } 

 <div class="container" style="width: 202px;"> <img src="an_img.jpg" style="width: 202px;background-color:green"> <div> <a href="a link" style="color:red;">i want this link on center</a> </div> </div> 

Answer 4

Please check once.

  .container { width: 200px; height: 200px; position: relative; white-space: nowrap; text-align: center; } .container img { width: 100%; height: 100%; position: absolute; top: 0;left: 0; } div.container:after{ display: inline-block; content: ''; height: 200px; vertical-align: middle; margin-right: -0.25em; width:1px; overflow:hidden; } .centered{ vertical-align:middle; display:none; white-space:normal; } div.container:hover .centered{display: inline-block;} 

 <div class="container"> <img src="an_img.jpg"> <div class="centered"> <a href="#">A link should be center</a> </div> </div>