Question

Basically, I want this sort of functionality but less complicated: http://www.blueacorn.com/team/

I have a ul of various li’s containing pictures which will link to a LinkedIn account only (not Twitter as well like in the example). I want it to be that when you hover over one of these pictures, a jQuery animation will display an image over it and you will be able to click on it to go to their LinkedIn. (Eventually these will all be different people’s pictures.)

Here’s my JFiddle: http://jsfiddle.net/h5y64/

If possible, I do NOT want to create an id for each box as I am going to have 40+ of them (and growing).

My main issues are:

1) I cannot get the divHover to properly animate itself on top of the picture I hovered over (it goes all over the place!)

2) I cannot get the divHover to link to different webpages.

I am sure there is a way for me to do this dynamically, but I can’t figure it out.

BTW, this question is similar but relies on creating an id for each block: How to position a hover div based on the position of the element

I haven’t really been able to find a good example of this (that I could understand). But the problem is hard to describe, so maybe I missed it.

I am still new to jQuery, so if possible please dumb down your answers. 🙂

Thanks in advance!

Answer 1

I’ve made a quick example of how i would do it.
Just like on blueacorn, i added the overlay to each li in advance, so there can be multiple of them visible. (if one is still sliding down, others can slide up at the same time).

You also had some problems in your HTML, like a around li, wich is not allowed.

Here’s my example:

Demo:

http://jsfiddle.net/bYcmc/

HTML:

<ul>
    <li>
        <div>
            <img src="http://w3schools.com/css/klematis.jpg" />
            <a href=""></a>
        </div>
        <h6>Name 1</h6>
    </li>
    .
    .
    .
</ul>

JS:

$('li').hover(function() {
    $(this).find('a').stop().animate({
        'top': '0%'
    }, 300);
}, function() {
    $(this).find('a').stop().animate({
        'top': '100%'
    }, 300);
})​