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

Answer 1

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>