html zoom on mouse over

Question

I want to have a photo in a site, and when I mouse over, I want a little magnifier zoom effect.

Can I do this in html with canvas or something? javascript maybe?

thank you

Piyush Mattoo · Answer 1 · 2011-02-09T01:56:58.720

Enclose your photo in a div and add Zoom via CSS on hover. You may want to increase the z-index upon hover. You can add to the below CSS to make the zoomed photo look/style better. If you don't want to reinvent the wheel, look out for some Jquery plugin which may accomplish the same thing in an elegant manner with less effort.

CSS:

#div-1 {
            position: absolute;
        }
#div-1.hover {
            position: absolute; zoom: 70%; border: solid 1px; z-index:10;
        }

Jquery/Javascript:

          <script type = "text/javascript"> 
$(document).ready(function() {
$(".div-1").onmouseover(function() {
    toggle_visibility('div-1');
})

function toggle_visibility(id) {
    var e = document.getElementById(id);
    if ($(e).hasClass("hover")) {
        $(e).removeClass("hover");
    } else {
        $($(e)).addClass("hover");
        $($(e)).attr({
            width: "100%",
            height: "100%"
        });
    }
}}); < /script>

score 2 · Answer 2 · answered Feb 09 '11 at 01:34

2

You can show the image in a div as a background-image and change the position with a little javascript.

Here's a library with some examples: http://www.mind-projects.it/projects/jqzoom/demos.php

answered Feb 09 '11 at 01:34

Wolph

78,177
11
137
148

how would one go about making the zoom area circular using jQZoom? – codecowboy May 02 '11 at 10:28
@codecowboy: I have written a response here: http://stackoverflow.com/questions/5856381/how-can-i-customise-jquery-loupe-to-have-a-circular-lens/5856594#5856594 – Wolph May 02 '11 at 22:47
it would have been less confusing if you had put it here! But thanks :-) – codecowboy May 04 '11 at 08:24
@codecowboy: ah... my bad. I assumed it was also about jQZoom – Wolph May 04 '11 at 08:51

score 2 · Accepted Answer · answered Feb 09 '11 at 01:37

Canvas isn't supported by IE without third-party plug-ins. You'll want to do this in JavaScript. jQuery makes this very easy and clean. Bind handlers for the hover in / out events for the image element you want to zoom using .hover(). "Binding handlers" simply means you pass two functions to .hover() which will be executed when the user hovers in and out, respectively. These functions will use animate(), which you can simply pass a new size.

Have a look at the documentation for .animate() and .hover(). If you're totally new to jQuery, check out the tutorials.

html zoom on mouse over

3 Answers3