Quick question about Zooming

Hi everyone,

Just wondering what is the best language to use to make xy zooming work on a webpage. Im looking to use the mouse scrolling and also a zooming map on the top left of a webpage for users to click and zoom.

I have browsed and googled, but i do not seem to find an answer anywhere . Google maps is an example of this function.

Thanks

 

You can use jquery and CSS3 combination or just a Pure CSS3 :

HTML:

<a href="#">
    <img src="path-to-image.jpg" alt="">
</a>

HTML:

a {
    text-decoration: none;
    display: block;
    width: 330px;
    height: 228px;
    float: left;
    margin: 0 3px 3px 0;
    opacity: 1;
    -webkit-transform: scale(1,1);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(1,1);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;
}
a:hover {
    opacity: .7;
    -webkit-transform: scale(1.05,1.07);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(1.05,1.07);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;
    position: relative;
    z-index: 99;
}

Test it