Submit your widget

Awesome mosaic transition effect with jQuery

Created 6 years ago   Views 29325   downloads 3961    Author burnmind
Awesome mosaic transition effect with jQuery
View DemoDownload 175.8 KB
Share |

This is a mosaic transition effect between two photos using jQuery

we will use two photos with the same dimensions. The only HTML code we’ll need (apart from loading the scripts) is an html element (it can be whatever you want; I’m using a div) that we will use as our container. It should have a unique id; I named it “mosaic”.

The only piece of CSS code we’ll have to write is the following (replace the images’ filenames with yours):

    background-image: url('bottom.jpg');
#mosaic span.hover
    float: left;
    background-image: url('top.jpg');

Now, let’s talk JavaScript.

First of all, we’ll include almost all of the code inside a $(document).ready function. We begin by declaring and initialising some variables: width and height contain our photos’ dimensions, elements is an array which will hold the elements we’ll create that will form the overlay of the base photo, count will be used later to help us iterate through the elements array, and el holds the HTML element we are using as a container. We also set the width and height of the element to the dimensions we just specified.

Read more: