jquery captions covering shadow on rollover

Question

Hello I am using this plugin: http://www.wbotelhos.com/capty/

The problem I am having is that the image I am putting this on already had a shadow on rollover with some simple css:

a:hover img.imagedropshadow {
    -moz-box-shadow: 1px 1px 5px #999;
    -webkit-box-shadow: 1px 1px 5px #999;
        box-shadow: 1px 1px 5px #999;
}

a:active img.imagedropshadow {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
        box-shadow: none;
}

After adding the jquery caption, I have the caption popping up but the image no longer has the shadow on roll over as I believe the image is not really being rolled over because of the jquery created div surrounding the image.

The image html is just like this:

<a href="blah.html ">
<img class="default imagedropshadow" border="0" width="290" height="400" title=" test" alt=test2" src="images/1797sbgx.jpg">
</a>

The caption css is:

div.capty-caption {
    background-color: #ccc;
    color: 000;
    font: bold 11px verdana;
    padding-left: 10px;
    padding-top: 7px;
      font-family: 'Quicksand', sans-serif;
  text-transform:uppercase;
  font-size: 87%;
  font-weight: 700;
}


div.capty-caption a {
    color: #318DAD;
    font: bold 11px verdana;
    text-decoration: none;
    text-shadow: none;
}

and the javascript for the capty plugin is: http://pastebin.com/xc1h1Mna

Any help is appreciated

Answer 1

Change the z-index of the image. The image will now always be at the top of the caption.

The CSS

.default.imagedropshadow {
     z-index: 1000;
}

Answer 2

Ok so here is what I did to fix it.. but it ruins reusability:

on line 51

    $wrapper.css({
        height:     '410',
        overflow: 'hidden',
        position:   'relative',
        width:      '295'
    });

hard coded height and width to accomodate larger image size due to shadow. This means it is only good for this image. I can I guess use the original This.height + 10 or whatever but not all images might have shadows.. In any case I am only using it on 1 size image so for my needs this will be good enough for now..

on line 91:

$caption.animate({ top: (-90) }, { duration: options.speed, queue: false });

changed to -90 so it does not overlap the shadow