Toyota has recently created an excellent online art competition that brings children’s work to life through the power of Vine. The project is a beautiful full-browser experience, which puts the content right at the forefront of this interface.

Once the content has loaded, the user can click on the ‘Project of the day’ – if nothing happens for a few seconds this is presented to them automatically. This takes place through a lovely expanding image that fills the entire screen while the interface is overlaid on top of this image. Because of the seamless display of the content, this has placed the user experience right in the centre of the design.

We are going to show how to create an image that will animate when clicked and expand to fill the size of the browser, with content appearing over the top. To do this, we need the following HTML structure in the body tag of the code. You can place anything you like in the inner section.

Style the content

In the head section of the document, add the following code for the CSS styles. Here we set the body to take the full size of the page; the image will be set to take the full width of the holding container. The inner section is positioned absolutely to the top corner.

Expand the image

Now we set the position of the <div> that holds the image so that it is in the centre of the display. To do this we position it absolutely, placing it halfway down and across the screen. Then we take off half of its width and height in the margin so it sits in the middle.

Click the image

We need to enable the image to be clicked, so we add the jQuery library and then open a script tag. We check if the document is ready and then detect if the image has been clicked. If it has, we grab the current width and height of the browser.

Animate the change

Now we take the content and animate its height, top position, margin top, left position, margin left and the width of the content. Once this has finished animating, we fade in the ‘inner’ content, which is our overlay.