The mandate
Animer une image avec effet zoom en CSS 3

Animer une image avec effet zoom en CSS 3

Catégorie: Javascript.
Posté par le 25/08/2014.
Dernière mise à jour le 25/08/2014.

Description

Animer une image avec effet zoom en CSS3.

Introduction

Ce tutoriel peut être réalisé à l'aide d'un simple éditeur de texte comme le « bloc notes ». Il ne nécessite aucun prérequis.

La page HTML

Pour commencer, nous allons créer un fichier du nom de animation.html. Cette page html contiendra une image que l'on va animer à l'aide de la fonction zoom CSS 3.

animation.html

<!DOCTYPE html>
<html>
<head>

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

    <a href="#" title="Animer une image avec effet zoom en CSS3"><img src="image.jpg" alt=""></a>
</body>
</html>

L'attibut « title » du lien va être utilisé afin d'afficher le titre sur l'image.

Animation de l'image

l'animation de l'image est composé de trois parties:

  • un effet zoom sur l'image: Cet effet est réalisé à l'aide de la propriété « transform » et de la méthode « scale »;
  • un effet assombri sur l'image: Cet effet est réalisé à l'aide d'un fond noir semi-transparent. Celui-ci est placé sur l'image;
  • l'affichage du titre: C'est également un fond semi-transparent qui est placé sur l'image;

Cest trois animation sont combinées lorsque l'utilisateur place son curseur sur l'image.

Afin de réaliser l'animation nous allons créer le fichier 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;
}

Tu as aimé ce tutoriel ?
Aide nous à améliorer le site ! Deviens partenaire officiel ou suis nous sur facebook !

Commentaires[0]

Tu as aimé ce tutoriel ? Alors partage-le avec tes amis !
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 Voir le flux rss

Mots Clés: animation CSS effet visuel html web

Veve :
(11/04/2013 - 17:19:44)
il faut juste mettre "sudo" à la place de "su" pour exécuter la commande en root

Veve :
(11/04/2013 - 17:18:56)
Salut tu peux aller lire ce tutoriel: http://www.tutorielsenfolie.com/tutoriels-63-installation-configuration-opennebula.html Il fonctionne aussi sous ubuntu

safa.souissi4 :
(10/04/2013 - 20:58:13)
s'il vous plait c urgent :(

safa.souissi4 :
(10/04/2013 - 20:56:25)
bonsoir,je cherche un tutos pour installer opennebula.org sous ubuntu 12.

Veve :
(18/03/2013 - 20:07:49)
oui, j'essaye de voir d'ou viens le problème.

sonde :
(18/03/2013 - 13:29:57)
re merci (j apprend un peu plus) je crois que j ai trouver pourquoi je peu pas poster si il y a ligne code impossible de poster lol

Veve :
(17/03/2013 - 21:34:49)
Salut, j'espère que ça t'a aidé.

sonde :
(17/03/2013 - 09:59:02)
pour ton aide

sonde :
(17/03/2013 - 09:57:36)
slt Veve impossible de laisser com

sonde :
(17/03/2013 - 09:56:55)
??

Demi-dieu :
(15/03/2013 - 18:41:13)
salut ^^

sonde :
(13/03/2013 - 14:49:35)
un petit coucou

Tanamoureuse :
(29/09/2011 - 06:11:08)
Je t'aime

Faire un don

Ma Publicité ici


Faire un don