Getting content to show in individual divs using hover in jquery

Question

So I'm building an online portfolio using bootstrap and jquery. I have a set of images lined up and formatted next to each other and I'm trying to get the description for each of them to pop up when the individual image is hovered over. Each image is wrapped in a ".col-md-3" tag and has a ".description" tag with information in it below the image tag. I can get all of the descriptions to show when a user hovers over any of the image tags but I can't get the description to show for one image when that individual image is hovered over.

HTML:
<div class="col-md-3 col-sm-6">
    <a href="Blevels/currentportfoliohome.html">
    <img src="Images/Faces/CurrentPortfolioface.jpg" alt="Overview of this Portfolio"></a>

    <div class="description">
    <p>These are the wireframes and sitemaps for this portfolio</p>
</div>
JQuery:
$(document).ready(function() {

    $(".description").hide();

    $(".col-md-3").hover(function() {
        $(".description").show();
    },function() {
        $(".description").hide();
    });
});

How do I get the browser to select individual description <div> s when individual images are hovered over?

Answer 1

You should be using $(this) which will refer to the .col-md-3 that's hovered over. Then you can use .find() which will look for the descendant .description :

$(this).find(".description").show();

Full JS

$(".description").hide();
$(".col-md-3").hover(
   function(){
      $(this).find(".description").show();
   },
   function(){
      $(this).find(".description").hide();
   }
);

FIDDLE