Show a title when hovering over an image with jQuery or CSS

Posted February 5, 2014 in Tutorials+Tips


Screenshot of hovering over a thumbnail
Looks kinda like that.

It’s not too hard! I was writing up a demo and figured I might as well share it with the world. You can do it in CSS or jQuery, definitely useful for galleries.

The Markup

A couple of figures surrounded by a nice, clearfixed wrapper (love those!):


<div class="wrapper clearfix">

    <figure class="gallery-item">
        <img src="http://placehold.it/300x300">
        <figcaption class="img-title">
            <h5>Image Title</h5>    
        </figcaption>
    </figure>

    <figure class="gallery-item">
        <img src="http://placehold.it/300x300">
        <figcaption class="img-title">
            <h5>Image Title</h5>    
        </figcaption>
    </figure>

</div>
       

The CSS

Style up a quick 50% grid and our image titles (they’ll be hidden). I’m assuming you already have a .clearfix style somewhere. To use CSS for the hide/show, uncomment the commented lines, and comment the display: none; on .img-title.


/* Uncomment everything commented to CSS for the hide/show */

.gallery {
    width: 25em;
    margin: 2em auto;
}

.gallery-item {
    height: auto;
    width: 48.618784527%;
    float: left;
    margin-bottom: 2em;
    position: relative;
}

    .gallery-item:first-child {
        margin-right: 2.762430939%;
    }

.gallery-item img {
    width: 100%;
}

.gallery-item:hover .img-title {
    /*opacity: 1;*/
}

.img-title {
    position: absolute;
    top: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    text-align: center;
    /*opacity: 0;*/
    display: none; /* comment this out for CSS hover */
    background-color: #333;
    /*transition: all 0.5s ease;*/
}

    .img-title h5 {
        position: absolute;
        color: #fff;
        top: 33%;
        width: 100%;
        text-align: center;
    }


With jQuery

Here’s the hover function:


$(document).ready( function() {

    $('.gallery-item').hover( function() {
        $(this).find('.img-title').fadeIn(300);
    }, function() {
        $(this).find('.img-title').fadeOut(100);
    });
    
});

Done! Have fun with your copy pasta. And, if you are in NYC or thereabouts, the disgusting slush outside.

Comments

What do you think? Do you have any questions, thoughts, or related links to share? Did I make a mistake in my post?

  • Thanks for this simple hover effect.

    Compose a Reply

  • This helped me out too, thanks a lot!

    Compose a Reply

  • try this using CSS only...

    .imageHolder {
    position: relative;
    width: 285px;
    height: 175px;
    }
    .imageHolder .caption {
    opacity: 0;
    position: absolute;
    height:50px;
    width: 283px;
    bottom: 0px;
    left: 0px;
    padding: 2px 0px;
    color: black;
    background: lime;
    text-align: center;
    font-weight:bold;
    }
    .imageHolder:hover .caption {
    opacity: 0.7;
    }

    Full source code...CSS image hover
    Ling

    Compose a Reply

  • Simple and Best Image Hover Tutorial !! Thank You.

    Compose a Reply

  • For the jquery one, there should be a stop in there so that the animations don't queue. So, something like:

    $(this).find('.img-title').stop(true, true).fadeIn(300);

    $(this).find('.img-title').stop(true, true).fadeOut(100);

    This was a very helpful tutorial, though. Thanks! It's just that I had to go look up and figure out how to get it to stop endlessly blinking when I scrub the mouse over the gallery.

    Compose a Reply

  • Compose a Reply

  • how can I have 6 images instead of 4 ??

    Compose a Reply

    • Change the widths of the image containers (.gallery-item) - so instead of ~25% (for row of 4), it would be ~16%. Good luck!

      Compose a Reply

Submit a Comment