Is it possible to zoom, when someone clicks on a link (image)?

Question

On my main page, I have 3 links (images). Like a portal.

This is what i want to make: When you click on one of the links, you zoom really far onto that one. So far that it filled up the full screen. But I dont want you to see whats in that page yet.

Example: http://prezi.com/0ehjgvtr9fzu/?utm_campaign=share&utm_medium=copy (click on the cloud which says:"Main idea")

Is this possible with HTML/CSS/JavaScript?

Answer 1

You can't "zoom" the viewport but you can use CSS/JS to mimic the behavior by scaling elements in animations. With CSS transforms/transitions you can pretty easily scale a "page" down and then expand it on click (like your demo Flash object).

Basic demo:

#container {
    transform-style : preserve-3d;
    perspective     : 400px;
}

#container .page {
    transition : transform 500ms ease-out;
    transform  : scale(0.2);
}

#container .page.make-page-big {
    transform : scale(1);
}

Where #container is the "viewport" and .page is a page that will be animated into full-view.

Here is a demo: http://jsfiddle.net/j1k3mcLp/

That should get you started, you can do a lot with 3D transforms as well, which will allow you to really get the effect you want.

UPDATE

Here's a demo using 3D transforms: http://jsfiddle.net/j1k3mcLp/1/