Show title on image when mousehover on that perticular image

1 Views

I want title on image when I mouse hover on that particular image, right now its show on four image when mouse hover on one image. Please help me out from this problem.

Code which I use

Read More
<div class="post col-sm-3 col-xs-6 cat-<?php echo get_the_first_category_ID();?>"id="header-img">
    <a href="<?php the_permalink(); ?>" >
        <?php echo g7_image($image_w2, $image_h2, false); ?>
    </a>
    <header>
      <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    </header>
</div>

And Jquery which I use 

$(document).ready(function(){
$(".col-sm-6 h2, .col-sm-3 h2").hide();
});

$(document).ready(function(){
$(".post.col-sm-3.col-xs-6 img").mouseenter(function(){
$(".post.col-sm-3.col-xs-6 h2").show();
});
$(".post.col-sm-3.col-xs-6 img").mouseleave(function(){
$(".post.col-sm-3.col-xs-6 h2").hide();
});
});

Here I attach one screen shotenter image description here

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. You can get this natively with HTML.

    For an image, use the ALT text:

    <img src="images/example.jpg" alt="This is an example">

    When the user pops their mouse of over it, it will show up.

    You can do a similar thing with links, but instead use a the TITLE option.

    <a href="example.com" title="Click to see an example">Example Link</a>

  2. I understand the desire to use Jquery vs. alt default behavior, though you can also create custom HTML in Jquery that reads in the alt text and inserts it into the custom HTML. That would be cleaner markup.

    But let’s say you keep the existing markup…

    <script>
$(".post.col-sm-3.col-xs-6 img").mouseenter(function(){
    $(this).children("h2").show();
});
$(".post.col-sm-3.col-xs-6 img").mouseleave(function(){
    $(this).children("h2").hide();
});
</script>