Add Link To Image On Hover jQuery -

i'm working on image grid using jquery , masonry.

i'm trying achieve following effects when user hovers on image in grid:

1. a link shall appear when mouse enters element
2. the link shall disappear when mouse leaves element
3. the image should fade/skew greyish coloring scheme (not implemented here - wasn't sure how approach it).

i've looked jquery ui's tooltips, these seem work in "speech bubble" kind of way, when i'm interested link appear on image itself.

this code i've tried, using append(), slaps link next image.

$(document).ready(function(){ $('.grid-item').hover(function(){ $(this).append($("<h1>this link 1 day</h1>")); }, function(){     $(this).find("h1:last").remove(); }); }); 

what happening totally normal. append link , the link appended. if right, want display image (with link) whenever user hovers on grid content. suppose looking for:

jquery:

$(document).ready(function(){        $("#contentdiv").hover(function(){             $("#imagediv").html("<a href='yourlink.com'><img src='yourimage.png'</a>");             $("#imagediv").show();        }, function(){             $("#imagediv").hide();        });         $("#contentdiv").mouseout(function(){             $("#imagediv").hide();        }); }); 

html displayed in grid (each row):

<div id="imagediv"> </div> <div id="contentdiv">    testing content, supposing displayed in grid </div> 

you can check out in this fiddle. play test div dimensions , picture make hover in more stable fashion. pointing out idea.

hope helped!