This tutorial explains how to animate an image with zoom effect and appearing title in CSS 3.
This tutorial can be realized with a simple text editor like « Notepad ». This tutorial doesn't require any prerequisite.
The HTML page
First of all, we will create a file called animation.html. This html page will contain an image that we will animate with the zoom function of CSS 3.
<link rel="stylesheet" media="screen" type="text/css" title="menu" href="animation.css" />
<title>Animation in CSS 3</title>
<a href="#" title="Animate an image with zoom effect in CSS 3"><img src="image.jpg" alt=""></a>
The « title » attribute of the link will be used for appearing title animation.
Animation of the image
Animation of the image consists of three parts:
- Zoom effect of the image: This effect is achieved by using « transform » CSS property along with « scale » method;
- Dark cover of the image: Actually it's a layer which goes over the image and has the same size as the image. This layer is added by pseudo-element before in CSS, it is semi-transparent (opacity CSS property) with black as the background color;
- Appearing title: It's also a layer which goes over the image and the "Dark cover" layer. This layer is added by pseudo-element after in CSS, it has semi-transparent background set to white color and a text which is taken from the attribute title of the link;
All three parts of this specially combined animation are performed when the user hovers the cursor over the image.
In order to realise the animation, we will create the file animation.css :
background-color: rgba(255, 255, 255, 0.8);
padding: 2% 3%;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
You like this tutorial ?
Like this website in order to promote it on facebook !