CODEWITHSUNDEEP
jqueryimagecaption
Jacklyn N
Jacklyn N

Reputation: 77

Image caption in Jquery

I am new to Jquery and while there are many image captions plugins for Jquery I wanted to create my own so as to learn.

However the problem I am getting is that when I hover over one image, the image caption is appearing over all the images I have on my page. Perhaps its something simple, but I am new at this Please help.

My Jquery that I wrote is:

$(document).ready(function(){
$('.caption').hide();
$('.qitem').hover(function() {
   $('.caption').animate(
        {opacity: 'show',height: 'show'}, 
        {queue: false, duration: 100 });


  }, function() {
    $('.caption').stop(true)
    .animate({
        opacity: 'hide',
        height: 'hide'
        }, {queue: false, duration: 300 });
  });
});

my HTML is:

<!--

<div class="qitem">
    <a class="fancybox fancybox.ajax" href="portfolioclient.html"><img src="tmb.jpg" alt="Test 1" title="" width="180" height="180"/></a>

    <span class="caption"><h4>Tester1</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<a class="fancybox fancybox.ajax" href="fancybox/fancyapps-fancyBox-0ffc358/demo/ajax.txt">Ajax</a></p></span>
</div>

<div class="qitem">
    <a class="fancybox fancybox.ajax" href="portfolioclient.html"><img src="2ndimage.jpg" alt="Test 1" title="" width="180" height="180"/></a>

    <span class="caption"><h4>Tester</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<a class="fancybox fancybox.ajax" href="fancybox/fancyapps-fancyBox-0ffc358/demo/ajax.txt">Ajax</a></p></span>
</div>
 -->

My CSS is:

.qitem {

    width:180px;
    height:180px;   

    /* some styling for the item */
    border:4px solid #222;  
     margin: 5px 20px 20px;

    /* absolute position enabled for children elements*/
    position:relative;


    float:left;

    /* hand symbol for ie and other browser */
    cursor:hand; cursor:pointer;
}

.qitem img {
    border:0;

    }

    /* styling for caption, position absolute is a must to set the z-index */
.qitem .caption {
    position:absolute;
    color:#ccc;
    display:block;
    position: absolute;
    bottom: 0px;
    background: #000; 
    opacity:0.6;

    }

.qitem .caption h4 {
    font-size:18px;
    padding:5px 15px 0px 15px;
    margin:0;
    color: #3A97F7;
    font-family: Verdana;
    letter-spacing: 2px;
}

.qitem .caption p {
    font-size:12px; 
    padding:3px 15px 5px 15px;
    margin:0;
    font-family:verdana;

}

.qitem a:hover{
font-weight:bold;
color:#00FFCC;
text-decoration:underline;
}
.qitem a{
text-decoration:none;
color:#FFFFFF;
}

Upvotes: 1

Views: 560

Answers (2)

pktangyue
pktangyue

Reputation: 8524

use $(this).find('.caption') to find the special caption:

$(document).ready(function(){
$('.caption').hide();
$('.qitem').hover(function() {
   $(this).find('.caption').animate(
        {opacity: 'show',height: 'show'}, 
        {queue: false, duration: 100 });


  }, function() {
    $(this).find('.caption').stop(true)
    .animate({
        opacity: 'hide',
        height: 'hide'
        }, {queue: false, duration: 300 });
  });
});

Upvotes: 1

Bruno Croys Felthes
Bruno Croys Felthes

Reputation: 1203

After the hover, use the this function to get the object that was hover...

When you use ('.qitem') inside the hover function, you get everything again...

$(document).ready(function(){
    $('.caption').hide();
    $('.qitem').hover(function() {
        $(this).find('.caption').animate(
        {opacity: 'show',height: 'show'}, 
        {queue: false, duration: 100 });


    }, function() {
        $(this).find('.caption').stop(true)
        .animate({
        opacity: 'hide',
        height: 'hide'
        }, {queue: false, duration: 300 });
    });
});

Upvotes: 0

Related Questions