CSS animations for images

Today I’m going to show you how to make some CSS animations for your images. With just some couple of lines, you can create some beautiful transition effects that will help you get more conversion.

Html Markup

The Html markup is so simple all we gonna need figure which is an Html5 element and we will put inside of it our image

<figure>
  <img src="http://cssparty.com/wp-content/uploads/2017/12/1.jpg" alt="">
</figure>

Zoom In

To make the zoom effect we will be using the CSS transform property and the CSS scale function to create this beautiful zoom animation.

And this is the CSS responsible for the Zoom In effect.

figure{
  width: 300px;
  height: 180px;
  overflow: hidden;
  float: left;
  margin: 0 10px;
}
figure img{
  width: 100%;
  height: auto;
  -webkit-transform: scale(1);
	transform: scale(1);
  -webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
figure.demo-1:hover img{
  -webkit-transform: scale(1.4);
	transform: scale(1.4);
}

Zoom Out

This is a similar animation effect to the Zoom In expect there is a small change here, is that the scale values are reverted, and by reverting them we get this beautiful Zoom Out animation.


The CSS responsible for the Zoom Out effect.

figure{
  width: 300px;
  height: 180px;
  overflow: hidden;
  float: left;
  margin: 0 10px;
}
figure img{
  width: 100%;
  height: auto;
  -webkit-transform: scale(1.4);
	transform: scale(1.4);
  -webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
figure.demo-2:hover img{
  -webkit-transform: scale(1);
	transform: scale(1);
}

Zoom Out + Rotate

This one is similar to the Zoom Out effect but we will add the Rotate function to the transform property.

The CSS responsible for the Zoom Out + Rotate effect.

figure{
  width: 300px;
  height: 180px;
  overflow: hidden;
  float: left;
  margin: 0 10px;
}
figure img{
  width: 100%;
  height: auto;
  -webkit-transform: rotate(15deg) scale(1.4);
	transform: rotate(15deg) scale(1.4);
  -webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
figure.demo-3:hover img{
  -webkit-transform: rotate(0) scale(1);
	transform: rotate(0) scale(1);
}

Check our tutorial Web Design 101:

Thank you for your time I’ll be adding more transition effects in this article soon.
Stay tuned and don’t forget to subscribe.

Leave a reply:

Your email address will not be published.

Site Footer