Add Link To Image On Hover jQuery

Question

I'm working on an image grid using jQuery and Masonry.

I'm trying to achieve the following effects when a user hovers on an image in the grid:

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

I've looked into jQuery UI's Tooltips, but these seem to work only in a "speech bubble" kind of way, when I'm interested for the link to appear on the image itself.

This is the code I've tried, using append(), which just slaps the link next to the image.

$(document).ready(function(){
$('.grid-item').hover(function(){
$(this).append($("<h1>This Will be A Link One Day</h1>"));
}, function(){
    $(this).find("h1:last").remove();
});
});

Answer 1

What is happening is totally normal. You append a link and the the link is appended. If I get it right, what you want is to display an image (with a link) whenever a user hovers over you grid content. I suppose this is what you are 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 your grid (each row):

<div id="imageDiv">
</div>
<div id="contentDiv">
   Testing content, supposing is displayed in your grid
</div>

You can also check it out in this fiddle. You could play with your test div dimensions and the picture to make it hover in a more stable fashion. I am just pointing out the idea.

Hope I helped!