Useful CSS3 Hover Effects for Picture Gallery

Written by Saran on February 5, 2015, Updated October 12, 2018

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.

We 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

<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

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

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

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

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

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

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

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

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

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