jquery image hover effect of description

Question

I currently have 4 images inline on an html page, that are pictures of people. I would like to know how to make an hover effect on the images (jQuery) so that when the mouse hovers above, the bottom of the page extends and a paragraph description of that person appears under all the images.

I would like to do it with this HTML

  <div class="page2">
    <a name="team" class="smoothScroll"></a>
    <h2>Meet the Team</h2>
    <div class="firstline">
    <div class="st">
        <ul>

        <li>
            <img src="bob.jpg">
            <p>Bob</p>
        </li>

        <li>
            <img src="bob.jpg">
            <p>Bob</p>
        </li>            

        <li>
            <img src="someone.jpg">
            <p>Someone</p>
        </li>   

        <li>
            <img src="someone.jpg">
            <p>Someone</p>
        </li>

        </ul>

        </div>




        <div class="nd">
        <ul>
        <li>
            <img src="bob.jpg">
            <p>bob</p>
            </li>
        <li>
            <img src="bob.jpg">
            <p>bob</p>
            </li>
        <li>
            <img src="someone.jpeg">
            <p>someone</p> </li>

        </ul>
        </div>

        </div>

CSS

.st img {
    max-height: 150px;
    max-width: 240px;

}
.st li {
    padding: 30px;
    padding-left: 50px;
    font-size: 12px;
    text-align: center;
    display: inline-block;
}

.nd img {

    max-width: 250px;

}
.nd li {
    padding-left: 125px;
    padding-bottom: 80px;
    font-size: 12px;
    text-align: center;
    display: inline-block;
}


.firstline p{
    display: none;
}

img:hover + p{
    display: block;
}

Answer 1

$( document ).ready( function() { $(".figcaption").hover(function() { $( this ).stop().animate( { opacity:1 }, 700, "easeOutQuad" ); }, function() { $( this ).stop().animate( { opacity:0 }, 700, "easeOutQuad" ); }) });

Answer 2

UPDATE

Using your code, you don't need jQuery at all. You can just target the sibling p:

p{
   display: none;
}

img:hover + p{
   display: block;
}

EXAMPLE 3

---

PREVIOUS:

You can do this with CSS as long as the images and their descriptions are siblings or descendants:

HTML

<img src="http://www.placecage.com/100/100"/>
<img src="http://www.placecage.com/100/100"/>
<img src="http://www.placecage.com/100/100"/>
<img src="http://www.placecage.com/100/100"/>
<div class="content person1">
    <p>Person 1</p>
    <p>blah blah blah blah blah blah blah blah </p>
</div>
<div class="content  person2">
    <p>Person 2</p>
    <p>blah blah blah blah blah blah blah blah </p>
</div>
<div class="content  person3">
    <p>Person 3</p>
    <p>blah blah blah blah blah blah blah blah </p>
</div>
<div class="content person4">
    <p>Person 4</p>
    <p>blah blah blah blah blah blah blah blah </p>
</div>

CSS

.content{
    display:none;
}

img:nth-of-type(1):hover ~ .person1{
    display: block;
}

img:nth-of-type(2):hover ~ .person2{
    display: block;
}

img:nth-of-type(3):hover ~ .person3{
    display: block;
}

img:nth-of-type(4):hover ~ .person4{
    display: block;
}

CSS EXAMPLE

OR

If you really want to do this with jQuery there are several ways to do it. This is one:

JS

$("img").hover(function(){
   var grabClass = $(this).attr("class");
   $(".person-"+grabClass).toggle();   
});

HTML

<img class="one" src="http://www.placecage.com/100/100"/>
<img class="two" src="http://www.placecage.com/100/100"/>
<img class="three" src="http://www.placecage.com/100/100"/>
<img class="four" src="http://www.placecage.com/100/100"/>
<div class="content person-one">
    <p>Person 1</p>
    <p>blah blah blah blah blah blah blah blah </p>
</div>
<div class="content  person-two">
    <p>Person 2</p>
    <p>blah blah blah blah blah blah blah blah </p>
</div>
<div class="content  person-three">
    <p>Person 3</p>
    <p>blah blah blah blah blah blah blah blah </p>
</div>
<div class="content person-four">
    <p>Person 4</p>
    <p>blah blah blah blah blah blah blah blah </p>
</div>

JQUERY EXAMPLE

Answer 3

Ok so first

<div class="page2">`
<a name="team" class="smoothScroll"></a>`
<h2>Meet the Team</h2>'
<div class="firstline">
<div class="st">

    <li>
        <img src="bob.jpg">
         <ul> //Add a ul
             <li>Bob</li> //Change these to li
         </ul>
    </li>

    <li>
        <img src="bob.jpg">
        <ul>
            <li>Bob</li>
        </ul>
    </li>            

    <li>
        <img src="someone.jpg">
        <p>Someone</p>
    </li>   

    <li>
        <img src="someone.jpg">
        <p>Someone</p>
    </li>

    </ul>

    </div>




    <div class="nd">
    <ul>
    <li>
        <img src="bob.jpg">
        <p>bob</p>
        </li>
    <li>
        <img src="bob.jpg">
        <p>bob</p>
        </li>
    <li>
        <img src="someone.jpeg">
        <p>someone</p> </li>

    </ul>
    </div>

    </div>

So basically you would do that for every single img and text you want underneath. Change the <p> to a <ul> with a <li>

Then the jquery code would look like this.

$(document).ready(function() {
    $('li').hover(function(){
        $(this).find('ul').stop().fadeToggle(400);
    });
});

If you would like me to explain the jquery code I would be happy to answer it. Remember that the html is just a change into them into lists. If you don't use any javascript they would just look like lists.

We can use some css to get rid of the decorations that lists have

li {
    list-style-type: none
}