How to Create an Animated Image Gallery Using HTML and CSS3

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

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=”http://www.onextrapixel.com/examples/animated-image-gallery-using-html-and-css3/” download=”http://www.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

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

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.

Hugo is a web designer and garden design writer from London, UK.

Comments

  1. / Reply

    Good presentation with eye catching images. Your way of writing and coding both worked great and very helpful to designers who are looking to try some new in web designing.

    • nicole,
    • December 13, 2012
    / Reply

    where do i put the css3 coding? together with the image or safe in another file as photo.css? I tried both ways but it doesnt work

      • flamelord,
      • January 3, 2013
      / Reply

      link the css file to your html file , link it using . put it above your

        • rhonna ortega,
        • January 13, 2013
        / Reply

        hi, i’m not a computer savvy person…looking at hugo’s steps seems rather easy..but i just dont know how to link them together…help…

          • binjal,
          • April 13, 2017
          / Reply

          “filename.css” -> at this place you need to write css file name and path.
          ex: desktop/test/css/main.css

          write this link in html file in head part and it will work.

    • Jax,
    • January 8, 2013
    / Reply

    works great in Firefox,Safari and Chrome but not all all in Explorer… Is there a fix for this?

      • aman,
      • September 18, 2013
      / Reply

      -ms- write it before the transition property & then try

    • sam,
    • February 4, 2013
    / Reply

    how do you put links on the pictures?

    • yassine foudil,
    • February 12, 2013
    / Reply

    Really I’m in love with ” onextrapixel ” it’s wonderful

    • isztwan22,
    • February 20, 2013
    / Reply

    Hi, i’ve got the same problem as rhona ortega and nicole….:( Could u explain that on the example ?

    • baker,
    • February 20, 2013
    / Reply

    hi i need a image gallery as project do u think u guys could do it for me in 1-2 days

    • heavenz,
    • April 15, 2013
    / Reply

    wow! thnks

    • Tyler,
    • April 17, 2013
    / Reply

    Thanks so much, looks beautiful! For those who don’t know where to put it: make a tag inside the tag, which is right after the tag IN your html file. Paste all of this wonderful coding there. SO: paste here

    • Sweeeper,
    • April 24, 2013
    / Reply

    I dont know much about html and css, can someone tell me how to add more pictures to this? I can only get five of my pictures to be rotated, the rest of the pictures just stack upp in the left corner. /sorry for bad english.

    • disqus_QyYM64gXiY,
    • May 2, 2013
    / Reply

    HI.How can i link this with a HTML link?

    • aman,
    • September 18, 2013
    / Reply

    have you tried of captions in bottom of the image-box please help i didn’t getting it .

    • saurav,
    • May 3, 2014
    / Reply

    great job

    • dromesburg,
    • September 12, 2014
    / Reply

    This gallery is amazing!! THank you so much for the details and the step-by-step for newbies like me… Is there any way possible to add text that would display with the images? I’d like folks to be able to read what the photo/image is about…

    • Jon Quioco,
    • March 5, 2015
    / Reply

    Hi there, so I’ve used this in my project for school and I’ve encountered a problem. The gallery seems to stack with the navbar I’ve created and stays on top of the navbar.

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Elegant Themes Coupon Code: 20% discount

While most other WordPress theme sites charge per theme, Elegant Themes is an amazing deal as you pay just once for access to 87 premium WordPress themes and a…

WrapPixel Coupon – 25% Discount

If you’re looking for an HTML or PSD template for your next website, checkout the selection of templates at WrapPixel made for web developers, designers, and agencies. You can…