How to Create an Animated Image Gallery Using HTML and CSS3

August 3, 2012 in Tutorials by Hugo Morana

The emergence of CSS3 technology has enabled web designers to display images in a more interesting format without the need for jQuery. In this tutorial I would like to show you a simple way to animate an image gallery using HTML and CSS3.

How to Create an Animated Image Gallery Using HTML and CSS3, Without the Need for jQuery

[tut demo=”https://onextrapixel.com/examples/animated-image-gallery-using-html-and-css3/” download=”https://onextrapixel.com/examples/animated-image-gallery-using-html-and-css3/animated-image-gallery-using-html-and-css3.zip”]

How to Create an Animated Image Gallery Using HTML and CSS3

HTML Structure

Beginning with the classic HTML skeleton, we put all the images that we want to display in a div mark-up:

<div class="photos"> 
    <img src="img/01.jpg" /> 
    <img src="img/02.jpg" /> 
    <img src="img/03.jpg" /> 
    <img src="img/04.jpg" /> 
    <img src="img/05.jpg" /> 
</div>

This should display the following in your web browser:

Step 1

The images can now be formatted using CSS3.

Positioning the Photos

To position each of the photos we need to set the position value to absolute as demonstrated below:

.photos img {
    position: absolute;
}

This parameter enables us to position the images relative to their ancestor element, independent of the document flow. Once the position has been set as absolute your images should be stacked like the example below:

Positioning the Photos

After this we need to use the pseudo-class nth-of-type to align each of the images. The 2 properties that we’ll be using are:

left and top for translation
rotate – this is a new CSS3 feature which allows for rotation of the images

Translation

First we need to roughly position each of the images. Personally I like to use pixels (px) as the unit of measurement because this is the chosen unit of measurement in Photoshop, however you may prefer to use em or percentage.

.photos img:nth-of-type(1) {
    left: 50px;
    top: 50px;
}

.photos img:nth-of-type(2) {
    left: 150px;
    top: 100px;
}

.photos img:nth-of-type(3) {
    left: 250px;
    top: 50px;
}

.photos img:nth-of-type(4) {
    left: 350px;
    top: 150px;
}

.photos img:nth-of-type(5) {
    left: 450px;
    top: 50px;
}

Notice that the positioning starts from the top left corner of the browser window. At this stage you should have something similar to:

Translation

Rotation

The rotate property from the transform function is included in CSS3. For this to work in each browser you have to customise the code by adding the relative prefix. Unfortunately at this time Internet Explorer does not support the rotate function, but it is supported by all other major web browsers.

.photos img:nth-of-type(1) {
    left: 50px;
    top: 50px;
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    transform: rotate(5deg);
}

.photos img:nth-of-type(2) {
    left: 150px;
    top: 100px;
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    transform: rotate(-10deg);
}

.photos img:nth-of-type(3) {
    left: 250px;
    top: 50px;
    -webkit-transform: rotate(7deg);
    -moz-transform: rotate(7deg);
    -o-transform: rotate(7deg);
    transform: rotate(7deg);
}

.photos img:nth-of-type(4) {
    left: 350px;
    top: 150px;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

.photos img:nth-of-type(5) {
    left: 450px;
    top: 50px;
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    transform: rotate(2deg);
}

This pseudo-class matches elements based on their positions within a parent element. Notice that for a better compatibility with the different browsers, I added 4 statements for each type. Your gallery should then look something like:

Rotation

Adding the Hover Effects

After some trial and error you should now have all of your images positioned the way you would like them to appear. Now to make the gallery a little more interesting we are going to add a hover effect to them using hover. This will cause each of the images to ‘pop out’ when scrolled over.

Additionally we will use the scale and transform functions to add a “growing effect” on the images, and z-index to bring the image to the forefront.

.photos img:hover {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
    z-index: 10;
}

Hover Effects
You can now add rotation to each of the images:

.photos img:hover {
    -webkit-transform: rotate(380deg) scale(1.5);
    -moz-transform: rotate(380deg) scale(1.5);
    -o-transform: rotate(380deg) scale(1.5);
    transform: rotate(380deg) scale(1.5);
    z-index: 10;
}

Refining the Effects by Managing Transitions

A new function of CSS3 is ‘transition’ (transition: property duration timing-function;) which allows us to customise certain effects. For example if we want a smoother animation of images we can add the following:

.photos img {
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}

The all means that all the CSS properties defined in the :hover section will be affected, whilst the ease-out function controls the time it takes for the animation to take place.

Adding Borders

To get a “polaroid effect” you can add white borders using the padding feature:

.photos img {
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    padding: 10px 10px 30px 10px;
    background: white;
    border: solid 1px black;
}

And the Result

Before mouse over

Before Mouse Over

After mouse over

After Mouse Over

If you want to change the border color, simply change the background value to any hexadecimal notation. I chose white #FFFFFF to represent an old Polaroid photo. For different colors you can find a list of different codes on the W3 Schools website here.

Advice

With a little tweaking you can make a very attractive, interactive gallery. But a word of warning – as with any image gallery you will want to compress the images as much as possible to increase loading speed of the page. This can be achieved in most photo editing software by scaling down the dimensions of the image or saving it in PNG or JPEG format.

More Ideas

If you want to take the idea further you could try the following:

add shadow effects using box-shadow
round the edges of your images with border-radius
play with transparency effects using opacity

Conclusion

Here is a simple animated CSS3 gallery, I hope you enjoy it. If you give this a try I would also love to see your creations – so leave a link in the comments below.