magnifying glass overlay on image hover in wordpress

Question

I got this gallery. I want to apply a magnifying glass (or something) when you hover the image, so the user easily can see that the image can get bigger. The effect I want is similar with this one.

I've been looking in the different files in wordpress, and my problem is that I just CAN'T add <span class="roll" ></span> inside a link, with the image.

If anyone knows how to do this, please tell. :-)

Thanks.

I've put this in footer.php

<script>
//$('a.image:link').prepend('<span class="roll"></span>');
$('.gallery-icon a:link').each(function() {
     $(this).prepend('<span class="roll"></span>');
     // OR
     //$(this).wrapInner('<span class="roll"></span>');
});
</script>

<script>
$(function() {
// OPACITY OF BUTTON SET TO 0%
$(".roll").css("opacity","0");

// ON MOUSE OVER
$(".roll").hover(function () {

// SET OPACITY TO 70%
$(this).stop().animate({
opacity: .7
}, "slow");
},

// ON MOUSE OUT
function () {

// SET OPACITY BACK TO 50%
$(this).stop().animate({
opacity: 1
}, "slow");
});
});
</script>

and this in the css.

span.roll {
    background:url(images/zoom.png) center center no-repeat #000;
    height: 120px;
    position: absolute;
    width: 150px;
    z-index: 7000;
    -webkit-box-shadow: 0px 0px 4px #ff0066;
    -moz-box-shadow: 0px 0px 4px  #ff0066;
    box-shadow: 0px 0px 4px  #ff0066;
}

When I look in the code from my webdeveloper it looks like this:

It's like wordpress overwrites all my css, etc..

Answer 1

how about using jQuery to append(prepend) a span to your link? without seeing your code, heres a small teaser

$('.IMAGELINK').each(function() {
     $(this).prepend('<span class="roll"></span>');
     // OR
     $(this).wrapInner('<span class="roll"></span>');
});

with javascript disabled the zoom function would be disabled and so this span would'nt be added to the code.