Useful CSS3 Hover Effects for Picture Gallery

If you are creating some sort of image gallery, you might be want to add some cool transition effects to your pictures, while displaying the information content. Most of you may know that we can accomplish these effects only using CSS3 animations, so we will not be requiring any JavaScript code in this tutorial, let's get started! Today we will create eight hover effects using CSS3, and all these effects can be achieved using simple CSS3 codes.css-picture-gallary-effectsWe start by writing HTML code for our picture gallery. As you can see in example below, we create unordered list <ul> which works as container for all the pictures. Then we warp image and info box with a DIV element, which ensures animating content doesn't go out of the boundaries.
HTML
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
<ul class="pics"><-- container --> <li class="spin"> <-- list container (different class for different effects)--> <div> <-- content wrapper --> <img src="picture.jpg"> <-- picture --> <ul> <-- picture info box --> <li> <h4>Title of Picture</h4> <i>Picture description goes here.</i> </li> </ul> </div> </li> </ul>
CSS below holds everything together. We make the list container and info box sizes exactly as the image size. Since the info box overlaps the image, we need to make it invisible initially using opacity:0 property, it will only be visible on mouse hover.
CSS
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
ul.pics{ width:820px; padding:0; margin: 0 auto; } ul.pics li{ height: 260px; /* height of image */ width: 400px; /* width of image */ list-style-type: none; display: inline-block; margin: 0px; padding: 0px; } ul.pics li ul{ position: absolute; height: 260px; width: 400px; margin: 0; padding: 0; background: #222; transition: all 0.5s ease; /* add effect with a duration of 0.5 seconds */ opacity:0; /* make info box invisible initially */ } ul.pics li:hover > div > ul{ opacity:1; /* make info box visible on hover*/ } ul.pics li img{ position: absolute; transition: all 0.5s ease; /* set duration to 0.5s of animations for the image */ } ul.pics li div{ position: absolute; overflow: hidden; /* hide content that extends beyond the box */ height: 260px; width: 400px; }

Spin Effect

    • Info Title

      Image Info.
Now we have put everything together, we can start applying the transition animation to our images. To create spin effect, we need transform:rotate(value). Vendor prefixes are not shown in the tutorial but they are included in the downloadable file.
CSS
  • 1
  • 2
  • 3
ul.pics li.spin:hover > div > img{ transform:rotate(360deg); }
What happens above in the code is that the image will rotate to 360 degree on the mouse hover, as I've added the rotate method with 360 degree value to our transform property.

Box Zoom Out Effect

    • Info Title

      Image Info.
To get the zoom out effect on the image, we use transform: scale(0, 0). As you can see I've set the scale to zero, this will cause image to shrink and eventually vanish.
CSS
  • 1
  • 2
  • 3
ul.pics li.boxout:hover > div > img{ transform: scale(0, 0); }

Slide to Right

    • Info Title

      Image Info.
To achieve this effect, I've used translate method to our transform property. This translate method accepts X and Y position values, which decides movement from the current position.
CSS
  • 1
  • 2
  • 3
ul.pics li.slide-right:hover > div > img{ transform: translate(400px, 0px); }

Slide to Buttom

    • Info Title

      Image Info.
Similarly, the translate method below moves the element to the bottom, giving us nice slide to bottom effect.
CSS
  • 1
  • 2
  • 3
ul.pics li.slide-bottom:hover > div > img{ transform: translate(0px, 260px); }

Skew effect

    • Info Title

      Image Info.
The skew method accepts X and Y angle parameters, and molds the element to the specified angles.
CSS
  • 1
  • 2
  • 3
ul.pics li.skew:hover > div > img{ transform: skewX(12deg) skewY(32deg); }

Rotate and Skew effect

    • Info Title

      Image Info.
We can specify more than one method to CSS transform property. As you can see in example below I have added both rotate and skew methods. This will cause image to rotate as well as skew to given degree value.
CSS
  • 1
  • 2
  • 3
ul.pics li.rotskew:hover > div > img{ transform: rotate(-30deg) skewY(200deg); }

Zoom out effect

    • Info Title

      Image Info.
Just like Box Zoom Out Effect example above, we set scale property to 2. Whereas value 1 is the exact size of the image, and 2 just doubles the size of the image, giving us nice zoom out effect.
CSS
  • 1
  • 2
  • 3
ul.pics li.zoomout:hover > div > img{ transform: scale(2, 2); }

Down left Rotate

    • Info Title

      Image Info.
We can add transform-origin and animation-timing-function property to our animation. transform-origin changes the position on transformed elements, and animation-timing-function effects the speed of animation, the ease-out method cause the animation to slowdown at the end.
CSS
  • 1
  • 2
  • 3
  • 4
  • 5
ul.pics li.downrt:hover > div > img{ transform-origin: bottom left; /* transform-origin: x y z */ animation-timing-function: ease-out; /* ease, ease-in, ease-out, ease-in-out, linear, step-start, step-end*/ transform: rotate(360deg); }

Browser Support

Most modern browser should support CSS3 animations, and some previous browsers might require Vendor prefix to work properly.
  • 10.0+
  • 36.0+
  • 16.0+
  • 3.2
  • 12.1

Conclusion

These are just some simple examples of CSS3 which you can apply instantly on your projects. I hope this tutorial was helpful and not too confusing. If you have any questions feel free to comment below. Thanks for reading this far.
Download Demo
New question is currently disabled!