Zoom in Zoom out (Pure CSS)

Feature

• Pure CSS
  • When your mouse cursor hover Image A, it will be bigger.
• Jquery hover function
  • When your mouse click "+/-" button, click it zoom in. when zoom in, click it again -> zoom out

Code Focus

//for image A pure CSS
#t1:hover,.zoom_in
{
margin:100px;
transform:scale(2,4);
-ms-transform:scale(2,4); /* IE 9 */
-moz-transform:scale(2,4); /* Firefox */
-webkit-transform:scale(2,4); /* Safari and Chrome */
-o-transform:scale(2,4); /* Opera */
}​

//for Image B Jquery function
$(function() {
    $(":button").click(function() {
        $("#t2").toggleClass("zoom_in");
    }); //end click
}); //end ready​​​​​​​​​

Demo

Source Code

Read More