Display image on top of another image when capsizing

Question

I want to display a zoom image (when hovering over the mouse) on top of certain images so that they display "click here to enlarge." I do not want to use the cursor.

I am sure there is a good way to do this with javascript jQuery, but I don't know that.

Does anyone have any good ideas?

Answer 1

HTML:

<a href='big.jpg'>
    <img src='mini.jpg' alt='a kitten'>
    <span>Click to view larger</span>
</a>

CSS

a > img + span {display: none}
a:hover > img + span {display: inline}

Then style as you like.

Answer 2

This jQuery plugin seems to do what you want, and you can easily customize it to suit your needs (i.e. / p>

Answer 3

Do you want to use the zoom icon instead of the cursor pointer? Mozilla supports a zoom cursor ( http://www.worldtimzone.com/mozilla/testcase/css3cursors.html ), but you will have to deal with a problem in IE. Perhaps you can have a hidden div with your custom zoom icon, for example: <div style="display:none" id="zoomcursor">yourcursor</div>then you can play with images and jquery:

$('img.zoomthis').mouseover(function(){
    var pos = $(this).position();
    $('#zoomcursor').css("position","absolute");
    $('#zoomcursor').css("top",pos.top+18);//You have to change this in order to place it right over your image
    $('#zoomcursor').css("left",$(obj).width()-30); //this too
    $('#zoomcursor').show();
}).mouseout(function(){
    $('#zoomcursor').hide();
})