Galactic Civilizations 3
Animate an image with zoom effect in CSS 3

Animate an image with zoom effect in CSS 3

Category: Javascript.
Posted by on the 25/08/2014.
Last update on the 26/08/2014.

Description

This tutorial explains how to animate an image with zoom effect and appearing title in CSS 3.

Introduction

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.

animation.html

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" media="screen" type="text/css" title="menu" href="animation.css" />
<title>
Animation in CSS 3</title>
</head>
<body>

    <a href="#" title="Animate an image with zoom effect in CSS 3"><img src="image.jpg" alt=""></a>
</body>
</html>

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 :

animation.css

a{
   display: inline-block;
   overflow: hidden;
   position: relative;
   text-decoration: none;
}

a:before{
   display: block;
   background-color: black;
   content: "";
   height: 100%;
   opacity: 0;
   position: absolute;
   width: 100%;
   z-index: 2;
}

a:after{
   display: block;
   background-color: rgba(255, 255, 255, 0.8);
   color: black;
   content: attr(title);
   left: -100%;
   padding: 2% 3%;
   position: absolute;
   text-align: center;
   text-transform: uppercase;
   top: 5%;
   width: 94%;
   z-index: 3;
}

a img{
   border: none;
   display: block;
   z-index: 1;
}

a:before,a:after,a img{
   -webkit-transition: all 200ms ease;
   -moz-transition: all 200ms ease;
   -o-transition: all 200ms ease;
   transition: all 200ms ease;
}

a:hover img{
   -webkit-transform: scale(1.2);
   -moz-transform: scale(1.2);
   -ms-transform: scale(1.2);
   -o-transform: scale(1.2);
   transform: scale(1.2);
}

a:hover:before{
   opacity: 0.3;
}

a:hover:after{
   left: 0;
}

You like this tutorial ?
Like this website in order to promote it on facebook !

You like this tutorial ? Share it with your friends !
Partager sur Facebook Partager sur Twitter Partager sur Myspace Partager sur Stumbleupon Soumettre sur Reddit Partager sur Digg Ajouter à vos favoris Technorati Ajouter à vos favoris Live Ajouter à vos favoris Google Ajouter sur vos favoris Yahoo