Animations au survol - Images avec Hover Effects

→ Des images qui changent lors du survol de la souris avec des effets variés (transformations, rotations, translations...).

Ces 10 propositions ci-dessous sont issues de ce site :

https://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/ (auteur : Alessio Atzeni)

info licence : https://tympanus.net/codrops/licensing/

Tout est téléchargeable sur le site et le tutoriel (en anglais) est très bien fait. Je me suis juste contenté de jouer avec et de modifier à la marge les propositions. Mais j'ai ajouté au script original le fait de pouvoir mettre des images dans le contenu qui apparait au survol, ainsi que, à la demande d'un utilisateur, une solution pour signaler une mise à jour (→ Voir plus bas).

Hover Style #1

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur d'adHoc.

Lire plus

Hover Style #2

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur d'adHoc.

Lire plus

Hover Style #3

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur d'adHoc.

Lire plus

Hover Style #4

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur d'adHoc.

Lire plus

Hover Style #5

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur d'adHoc.

Lire plus

Hover Style #6

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur d'adHoc.

Lire plus

Hover Style #7

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur d'adHoc.

Lire plus

Hover Style #8

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur d'adHoc.

Lire plus

Hover Style #9

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur d'adHoc.

Hover Style #10

sourire.png Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur d'adHoc.

Lire plus

Hover Style #9bis

Une autre image de cet effet pour montrer les angles de rotation : ici 76° et -14°. Voir plus bas dans la page, le code et la méthode de calcul.

Les codes utilisés sont ci-dessous.

Le contenu du premier onglet (onglet 0) : Style commun est obligatoire. Ensuite, ajouter au même endroit les codes correspondant aux effets souhaités, en adaptant à l'aide des quelques commentaires. Il est possible d'encadrer ce style avec les balises [style type="text/css"]...[/style] et de le placer au début du code source de la boîte, de la page... Ou bien comme c'est le cas ici de le placer dans un fichier de style additionnel, nommé ici animsurvol_hover_effects.css : Il est placé dans le dossier css des skins et son appel au début du code source est le suivant :


    <link charset="utf-8" href="skin/css/animsurvol_hover_effects.css" rel="stylesheet" />

Et, dans tous les cas, dans le code source de la page ou de la boîte, là où vous souhaitez placer les images, insérez le code correspondant (voir onglet B) en adaptant les contenus, bien sûr. Ces codes sont très proches les uns des autres à part pour l'onglet C qui détaille le style pour l'image #9bis.

0 1 2 3 4 5 6 7 8 9 A B C

Style commun


/*style commun*/
.view { /*attributs image*/
	width: 200px;
	height: 200px;
	margin: 5px; /*marges extérieures*/
	float: left;
	border: 8px solid #C0C0C0; /*bordure : épaisseur nature couleur*/
	overflow: hidden;
	position: relative;
	text-align: center;
	box-shadow: 1px 1px 2px #555; /*ombre portée de la boite*/
	cursor: default;
	background: #C0C0C0; /*couleur qui apparait lors des transformations*/
	border-radius:6px; /*arrondis*/
}
.view .mask,.view .content { /*attributs masque et contenu : mêmes dimensions que ci-dessus*/
	width: 200px;
	height: 200px;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
}
.view #front-img {
	display: block;
	position: relative;
}
.view h2 { /*attributs titre*/
	color: #FFFFFF;
	text-align: center;
	position: relative;
	font-size: 14px;
	font-weight: bold;
	padding: 10px;
	background: rgba(0, 0, 0, 0.8);
	margin: 10px 0 0 0;
}
.view p { /*attributs paragraphe*/
	font-family: Arial, sans serif;
	font-style: italic;
	font-size: 12px;
	position: relative;
	color: #FFFFFF;
	padding: 5px 20px 5px 10px;
	text-align: center;
	text-indent:0;
}
.view a.info { /*attributs liens du dessous*/
	display: inline-block;
	text-decoration: none;
	padding: 7px 14px;
	margin: 0 25px 0 10px;
	background: rgba(0, 0, 0, 1);
	color: #FFFFFF;
	border-radius:4px;
	box-shadow: 0 0 1px #000000; /*ombre portée de la boite*/
}
.view a.info:hover { /*attributs liens du dessous au survol*/
	box-shadow: 0 0 5px #FFFFFF; /*ombre portée de la boite au survol*/
}
/*fin style commun*/

Hover Style #1


/*hover style #1*/
.view-first #front-img {
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	transition: all 0.2s linear; /*temps et nature de transition + préfixes*/
}
.view-first .mask {
	opacity: 0; /*opacité0=invisible + préfixes*/
	background-color: rgba(133,14,241, 0.7); /*couleur de fond du masque*/
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out; /*temps et nature de transition + préfixes*/
}
.view-first h2 {
	-webkit-transform: translateY(-100px);
	-moz-transform: translateY(-100px);
	transform: translateY(-100px); /*transformation titre : >bas + préfixes*/
	opacity: 0;  /*opacité0=invisible + préfixes*/
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out; /*temps et nature de transition + préfixes*/
}
.view-first p {
	-webkit-transform: translateY(100px);
	-moz-transform: translateY(100px);
	transform: translateY(100px); /*transformation paragraphe : >haut + préfixes*/
	opacity: 0; /*opacité0=invisible + préfixes*/
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	transition: all 0.2s linear; /*temps et nature de transition + préfixes*/
}
.view-first:hover #front-img {
	-webkit-transform: scale(1.1,1.1);
	-moz-transform: scale(1.1,1.1);
	transform: scale(1.1,1.1); /*Transformation échelle image au survol + préfixes*/
}
.view-first a.info {
	opacity: 0; /*opacité0=invisible + préfixes*/
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out; /*temps et nature de transition lien + préfixes*/
}
.view-first:hover .mask {
	opacity: 1; /*opacité1=visible*/
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
	opacity: 1; /*opacité1=visible*/
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px); /*transformation titre paragraphe lien survolés + préfixes*/
}
.view-first:hover p {
	-webkit-transition-delay: 0.1s;
	-moz-transition-delay: 0.1s;
	transition-delay: 0.1s; /* délai transition paragraphe survolé + préfixes*/
}
.view-first:hover a.info {
	-webkit-transition-delay: 0.2s;
	-moz-transition-delay: 0.2s;
	transition-delay: 0.2s; /* délai transition lien survolé + préfixes*/
}
/*fin hover style #1*/

Hover Style #2


/*hover style #2*/
.view-second #front-img {
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in; /*temps et nature de transition + préfixes*/
}
.view-second .mask {
	background-color: rgba(10,98,186, 0.7); /*couleur de fond du masque*/
	width: 200px;	
	height: 200px;
	margin: 120px 0px 0px 65px; /*marges à ajuster*/
	padding: 0px 0px 0px 0px; /*marges à ajuster*/
	opacity: 0; /*opacité0=invisible*/
	-webkit-transform: translate(0px, 0px) rotate(45deg);
	-moz-transform: translate(0px, 0px) rotate(45deg);
	transform: translate(0px, 0px) rotate(45deg); /*transformation masque : rotation + préfixes*/
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out; /*temps et nature de transition + préfixes*/
}
.view-second h2 {
	border-bottom: 1px solid rgba(0, 0, 0, 0.3);
	background: transparent;
	margin: 0px 30px 0px 40px; /*marges à ajuster*/
	-webkit-transform: translate(100px, -100px);
	-moz-transform: translate(100px, -100px);
	transform: translate(100px, -100px); /*transformation titre : >droite >bas + préfixes*/
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out; /*temps et nature de transition + préfixes*/
}
.view-second p {
	padding: 5px 20px; /*marges à ajuster*/
	-webkit-transform: translate(-200px, 200px);
	-moz-transform: translate(-200px, 200px);
	transform: translate(-200px, 200px); /*transformation paragraphe : >gauche >haut + préfixes*/
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out; /*temps et nature de transition + préfixes*/
}
.view-second a.info {
	-webkit-transform: translate(0px, 100px);
	-moz-transform: translate(0px, 100px);
	transform: translate(0px, 100px); /*transformation lien : >haut + préfixes*/
	-webkit-transition: all 0.2s 0.1s ease-in-out;
	-moz-transition: all 0.2s 0.1s ease-in-out;
	transition: all 0.2s 0.1s ease-in-out; /*temps et nature de transition + préfixes*/
}
.view-second:hover .mask {
	opacity: 1; /*opacité1=visible*/
	-webkit-transform: translate(-80px, -125px) rotate(0deg);
	-moz-transform: translate(-80px, -125px) rotate(0deg);
	transform: translate(-80px, -125px) rotate(0deg); /*transformation masque survolé : >gauche >bas + préfixes*/
}
.view-second:hover h2 {
	-webkit-transform: translate(0px,0px);
	-moz-transform: translate(0px,0px);
	transform: translate(0px,0px); /*transformation titre survolé + préfixes*/
	-webkit-transition-delay: 0.3s;
	-moz-transition-delay: 0.3s;
	transition-delay: 0.3s; /*délai transition titre survolé + préfixes*/
}
.view-second:hover p {
	padding: 5px 10px 5px 20px; /*marges à ajuster*/
	-webkit-transform: translate(0px,0px);
	-moz-transform: translate(0px,0px);
	transform: translate(0px,0px); /*transformation paragraphe survolé + préfixes*/
	-webkit-transition-delay: 0.4s;
	-moz-transition-delay: 0.4s;
	transition-delay: 0.4s; /*délai transition paragraphe survolé + préfixes*/
}
.view-second:hover a.info {
	margin: 0 25px 0 35px;
	-webkit-transform: translate(0px,0px);
	-moz-transform: translate(0px,0px);
	transform: translate(0px,0px);
	-webkit-transition-delay: 0.5s;
	-moz-transition-delay: 0.5s;
	transition-delay: 0.5s; /*délai transition lien survolé + préfixes*/
}
/*fin hover style #2*/

Hover Style #3


/*hover style #3*/
.view-third #front-img {
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in; /*temps et nature de transition + préfixes*/
}
.view-third .mask {
	background-color: rgba(3,33,33,0.8); /*couleur de fond du masque*/
	opacity: 0; /*opacité0=invisible*/
	-webkit-transform: translate(460px, -100px) rotate(180deg);
	-moz-transform: translate(460px, -100px) rotate(180deg);
	transform: translate(460px, -100px) rotate(180deg); /*transformation masque : translation >droite >bas rotation + préfixes*/
	-webkit-transition: all 0.2s 0.4s ease-in-out;
	-moz-transition: all 0.2s 0.4s ease-in-out;
	transition: all 0.2s 0.4s ease-in-out; /*temps et nature de transition + préfixes*/
}
.view-third h2 {
	-webkit-transform: translateY(-100px);
	-moz-transform: translateY(-100px);
	transform: translateY(-100px); /*transformation titre : >bas + préfixes*/
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out; /*temps et nature de transition + préfixes*/
}
.view-third p {
	background: transparent; /*couleur de fond du paragraphe*/
	-webkit-transform: translateX(300px) rotate(90deg);
	-moz-transform: translateX(300px) rotate(90deg);
	transform: translateX(300px) rotate(90deg); /*transformation paragraphe : >droite rotation + préfixes*/
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out; /*temps et nature de transition + préfixes*/
}
.view-third a.info {
	-webkit-transform: translateY(-200px);
	-moz-transform: translateY(-200px);
	transform: translateY(-200px); /*transformation lien : >bas + préfixes*/
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out; /*temps et nature de transition + préfixes*/
}
.view-third:hover .mask {
	opacity: 1; /*opacité1=visible*/
	-webkit-transform: translate(0px, 0px);
	-moz-transform: translate(0px, 0px);
	transform: translate(0px, 0px); /*transformation masque survolé + préfixes*/
	-webkit-transition-delay: 0s;
	-moz-transition-delay: 0s;
	transition-delay: 0s; /*délai transition masque survolé + préfixes*/
}
.view-third:hover h2 {
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px); /*transformation titre survolé + préfixes*/
	-webkit-transition-delay: 0.5s;
	-moz-transition-delay: 0.5s;
	transition-delay: 0.5s; /*délai transition titre survolé + préfixes*/
}
.view-third:hover p {
	-webkit-transform: translateX(0px) rotate(0deg);
	-moz-transform: translateX(0px) rotate(0deg);
	transform: translateX(0px) rotate(0deg); /*transformation paragraphe survolé + préfixes*/
	-webkit-transition-delay: 0.4s;
	-moz-transition-delay: 0.4s;
	transition-delay: 0.4s; /*délai transition paragraphe survolé + préfixes*/
}
.view-third:hover a.info {
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px); /*transformation lien survolé + préfixes*/
	-webkit-transition-delay: 0.3s;
	-moz-transition-delay: 0.3s;
	transition-delay: 0.3s; /*délai transition lien survolé + préfixes*/
}
/*fin hover style #3*/

Hover Style #4


/*hover style #4*/
.view-fourth #front-img {
	-webkit-transition: all 0.4s ease-in-out 0.2s;
	-moz-transition: all 0.4s ease-in-out 0.2s;
	transition: all 0.4s ease-in-out 0.2s; /*temps et nature de transition + préfixes*/
	opacity: 1; /*opacité1=visible*/
}
.view-fourth .mask {
	background-color: rgba(2,21,2,0.8); /*couleur de fond du masque*/
	opacity: 0; /*opacité0=invisible + préfixes*/
	-webkit-transform: scale(0) rotate(-180deg);
	-moz-transform: scale(0) rotate(-180deg);
	transform: scale(0) rotate(-180deg); /*transformation masque : échelle>0 rotation + préfixes*/
	-webkit-transition: all 0.4s ease-in;
	-moz-transition: all 0.4s ease-in;
	transition: all 0.4s ease-in; /*temps et nature de transition + préfixes*/
	border-radius: 0px;
}
.view-fourth h2 {
	opacity: 0; /*opacité0=invisible*/
	border-bottom: 1px solid rgba(0, 0, 0, 0.3); /*bordure inférieure*/
	background: transparent;
	margin: 10px 30px 0px 30px; /*marges à ajuster*/
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out; /*temps et nature de transition + préfixes*/
}
.view-fourth p {
	opacity: 0; /*opacité0=invisible*/
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out; /*temps et nature de transition + préfixes*/
}
.view-fourth a.info {
	opacity: 0; /*opacité0=invisible*/
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out; /*temps et nature de transition + préfixes*/
}
.view-fourth:hover .mask {
	opacity: 1; /*opacité1=visible*/
	-webkit-transform: scale(1) rotate(0deg);
	-moz-transform: scale(1) rotate(0deg);
	transform: scale(1) rotate(0deg); /*transformation masque survolé : échelle>1 rotation + préfixes*/
	-webkit-transition-delay: 0.2s;
	-moz-transition-delay: 0.2s;
	transition-delay: 0.2s; /*délai transition masque survolé + préfixes*/
}
.view-fourth:hover #front-img {
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	transform: scale(0); /*transformation image survolée : échelle>0 + préfixes*/
	opacity: 0; /*opacité0=invisible*/
	-webkit-transition-delay: 0s;
	-moz-transition-delay: 0s;
	transition-delay: 0s; /*délai transition image survolée + préfixes*/
}
.view-fourth:hover h2,
.view-fourth:hover p,
.view-fourth:hover a.info {
	opacity: 1; /*opacité1=visible*/
	-webkit-transition-delay: 0.5s;
	-moz-transition-delay: 0.5s;
	transition-delay: 0.5s; /*délai transition titre paragraphe lien survolés + préfixes*/
}
/*fin hover style #4*/

Hover Style#5


/*hover style #5*/
.view-fifth #front-img {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out; /*temps et nature de transition + préfixes*/
}
.view-fifth .mask {
	background-color: rgba(176,176,9,0.3); /*couleur de fond du masque*/
	-webkit-transform: translateX(-200px);
	-moz-transform: translateX(-200px);
	transform: translateX(-200px); /*transformation masque : >gauche + préfixes*/
	opacity: 1; /*opacité1=visible*/
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out; /*temps et nature de transition + préfixes*/
}
.view-fifth h2 {
	background: rgba(255, 255, 255, 0.5); /*couleur de fond du titre*/
	color: #000000; /*couleur du titre*/
	box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5); /*ombre portée du titre*/
}
.view-fifth p {
	opacity: 0; /*opacité0=invisible*/
	color: #333333; /*couleur du paragraphe*/
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	transition: all 0.2s linear; /*temps et nature de transition + préfixes*/
}
.view-fifth:hover .mask {
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	transform: translateX(0px); /*transformation masque survolé + préfixes*/
}
.view-fifth:hover #front-img {
	-webkit-transform: translateX(200px);
	-moz-transform: translateX(200px);
	transform: translateX(200px); /*transformation image survolée : >droite + préfixes*/
}
.view-fifth:hover p {
	opacity: 1; /*opacité1=visible*/
}
/*fin hover style #5*/

Hover Style #6


/*hover style #6*/
.view-sixth #front-img {
	-webkit-transition: all 0.4s ease-in-out 0.5s;
	-moz-transition: all 0.4s ease-in-out 0.5s;
	transition: all 0.4s ease-in-out 0.5s; /*temps et nature de transition + préfixes*/
}
.view-sixth .mask {
	background-color: rgba(155,55,5,0.7); /*couleur de fond du masque*/
	opacity: 0; /*opacité0=invisible*/
	-webkit-transition: all 0.3s ease-in 0.4s;
	-moz-transition: all 0.3s ease-in 0.4s;
	transition: all 0.3s ease-in 0.4s; /*temps et nature de transition + préfixes*/
}
.view-sixth h2 {
	opacity: 0; /*opacité0=invisible*/
	border-bottom: 1px solid rgba(0, 0, 0, 0.3); /*bordure inférieure du titre*/
	background: transparent;
	margin: 10px 30px 0px 30px; /*marges à ajuster*/
	-webkit-transform: scale(10);
	-moz-transform: scale(10);
	transform: scale(10); /*transformation titre : échelle*10 + préfixes*/
	-webkit-transition: all 0.3s ease-in-out 0.1s;
	-moz-transition: all 0.3s ease-in-out 0.1s;
	transition: all 0.3s ease-in-out 0.1s; /*temps et nature de transition + préfixes*/
}
.view-sixth p {
	opacity: 0; /*opacité0=invisible*/
	-webkit-transform: scale(10);
	-moz-transform: scale(10);
	transform: scale(10); /*transformation paragraphe : échelle*10 + préfixes*/
	-webkit-transition: all 0.3s ease-in-out 0.2s;
	-moz-transition: all 0.3s ease-in-out 0.2s;
	transition: all 0.3s ease-in-out 0.2s; /*temps et nature de transition + préfixes*/
}
.view-sixth a.info {
	opacity: 0; /*opacité0=invisible*/
	-webkit-transform: translateY(100px);
	-moz-transform: translateY(100px);
	transform: translateY(100px); /*transformation lien : >haut + préfixes*/
	-webkit-transition: all 0.3s ease-in-out 0.1s;
	-moz-transition: all 0.3s ease-in-out 0.1s;
	transition: all 0.3s ease-in-out 0.1s; /*temps et nature de transition + préfixes*/
}
.view-sixth:hover .mask {
	opacity: 1; /*opacité1=visible*/
	-webkit-transition-delay: 0s;
	-moz-transition-delay: 0s;
	transition-delay: 0s; /*délai transition masque survolé + préfixes*/
}
.view-sixth:hover #front-img {
	-webkit-transition-delay: 0s;
	-moz-transition-delay: 0s;
	transition-delay: 0s; /*délai transition image survolée + préfixes*/
}
.view-sixth:hover h2 {
	opacity: 1; /*opacité1=visible*/
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	transform: scale(1); /*transformation titre survolé : échelle1 + préfixes*/
	-webkit-transition-delay: 0.1s;
	-moz-transition-delay: 0.1s;
	transition-delay: 0.1s; /*délai transition titre survolé + préfixes*/
}
.view-sixth:hover p {
	opacity: 1; /*opacité1=visible*/
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	transform: scale(1); /*transformation paragraphe survolé : échelle1 + préfixes*/
	-webkit-transition-delay: 0.2s;
	-moz-transition-delay: 0.2s;
	transition-delay: 0.2s; /*délai transition titre survolé + préfixes*/
}
.view-sixth:hover a.info {
	opacity: 1; /*opacité1=visible*/
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px); /*transformation lien survolé + préfixes*/
	-webkit-transition-delay: 0.3s;
	-moz-transition-delay: 0.3s;
	transition-delay: 0.3s; /*délai transition lien survolé + préfixes*/
}
/*fin hover style #6*/

Hover Style #7


/*hover style #7*/
.view-seventh #front-img {
	opacity: 1; /*opacité1=visible*/
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out; /*temps et nature de transition + préfixes*/
}
.view-seventh .mask {
	background-color: rgba(73,1,39,0.5); /*couleur de fond du masque*/
	-webkit-transform: rotate(0deg) scale(1);
	-moz-transform: rotate(0deg) scale(1);
	transform: rotate(0deg) scale(1); /*transformation masque : échelle1 + préfixes*/
	opacity: 0; /*opacité0=invisible*/
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out; /*temps et nature de transition + préfixes*/
}
.view-seventh h2 {
	-webkit-transform: translateY(-200px);
	-moz-transform: translateY(-200px);
	transform: translateY(-200px); /*transformation titre : >bas + préfixes*/
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out; /*temps et nature de transition + préfixes*/
}
.view-seventh p {
	-webkit-transform: translateY(-200px);
	-moz-transform: translateY(-200px);
	transform: translateY(-200px); /*transformation paragraphe : >bas + préfixes*/
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out; /*temps et nature de transition + préfixes*/
}
.view-seventh a.info {
	-webkit-transform: translateY(-200px);
	-moz-transform: translateY(-200px);
	transform: translateY(-200px); /*transformation lien : >bas + préfixes*/
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out; /*temps et nature de transition + préfixes*/
}
.view-seventh:hover #front-img {
	-webkit-transform: rotate(720deg) scale(0);
	-moz-transform: rotate(720deg) scale(0);
	transform: rotate(720deg) scale(0); /*transformation image survolée : rotation échelle0 + préfixes*/
	opacity: 0; /*opacité0=invisible*/
}
.view-seventh:hover .mask {
	opacity: 1; /*opacité1=visible*/
	-webkit-transform: translateY(0px) rotate(0deg);
	-moz-transform: translateY(0px) rotate(0deg);
	transform: translateY(0px) rotate(0deg); /*transformation masque survolé + préfixes*/
	-webkit-transition-delay: 0.4s;
	-moz-transition-delay: 0.4s;
	transition-delay: 0.4s; /*délai transition masque survolé + préfixes*/
}
.view-seventh:hover h2 {
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px); /*transformation titre survolé + préfixes*/
	-webkit-transition-delay: 0.7s;
	-moz-transition-delay: 0.7s;
	transition-delay: 0.7s; /*délai transition titre survolé + préfixes*/
}
.view-seventh:hover p {
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px); /*transformation paragraphe survolé + préfixes*/
	-webkit-transition-delay: 0.6s;
	-moz-transition-delay: 0.6s;
	transition-delay: 0.6s; /*délai transition paragraphe survolé + préfixes*/
}
.view-seventh:hover a.info {
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px); /*transformation lien survolé + préfixes*/
	-webkit-transition-delay: 0.5s;
	-moz-transition-delay: 0.5s;
	transition-delay: 0.5s; /*délai transition lien survolé + préfixes*/
}
/*fin hover style #7*/

Hover Style #8


/*hover style #8*/
.view-eighth .mask {
	background-color: rgba(30, 30, 30, 0.7); /*couleur de fond du masque*/
	top: -200px; /*position masque invisible*/
	opacity: 0; /*opacité0=invisible*/
	-webkit-transition: all 0.3s ease-out 0.5s;
	-moz-transition: all 0.3s ease-out 0.5s;
	transition: all 0.3s ease-out 0.5s; /*temps et nature de transition + préfixes*/
}
.view-eighth h2 {
	-webkit-transform: translateY(-200px);
	-moz-transform: translateY(-200px);
	transform: translateY(-200px); /*transformation titre : >bas + préfixes*/
	-webkit-transition: all 0.2s ease-in-out 0.1s;
	-moz-transition: all 0.2s ease-in-out 0.1s;
	transition: all 0.2s ease-in-out 0.1s; /*temps et nature de transition + préfixes*/
}
.view-eighth p {
	color: #FFFFFF;
	-webkit-transform: translateY(-200px);
	-moz-transform: translateY(-200px);
	transform: translateY(-200px); /*transformation paragraphe : >bas + préfixes*/
	-webkit-transition: all 0.2s ease-in-out 0.2s;
	-moz-transition: all 0.2s ease-in-out 0.2s;
	transition: all 0.2s ease-in-out 0.2s; /*temps et nature de transition + préfixes*/
}
.view-eighth a.info {
	-webkit-transform: translateY(-200px);
	-moz-transform: translateY(-200px);
	transform: translateY(-200px); /*transformation lien : >bas + préfixes*/
	-webkit-transition: all 0.2s ease-in-out 0.3s;
	-moz-transition: all 0.2s ease-in-out 0.3s;
	transition: all 0.2s ease-in-out 0.3s; /*temps et nature de transition + préfixes*/
}
.view-eighth:hover .mask {
	opacity: 1; /*opacité1=visible*/
	top: 0px; /*position masque visible*/
	-webkit-transition-delay: 0s;
	-moz-transition-delay: 0s;
	transition-delay: 0s; /*délai transition masque survolé + préfixes*/
	-webkit-animation: bounceY 0.9s linear;
	-moz-animation: bounceY 0.9s linear;
	animation: bounceY 0.9s linear; /*animation masque survolé : rebond(bounce) vertical + préfixes*/
}
.view-eighth:hover h2 {
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px); /*transformation titre survolé + préfixes*/
	-webkit-transition-delay: 0.4s;
	-moz-transition-delay: 0.4s;
	transition-delay: 0.4s; /*délai transition titre survolé + préfixes*/
}
.view-eighth:hover p {
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px); /*transformation paragraphe survolé + préfixes*/
	-webkit-transition-delay: 0.2s;
	-moz-transition-delay: 0.2s;
	transition-delay: 0.2s; /*délai transition paragraphe survolé + préfixes*/
}
.view-eighth:hover a.info {
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px); /*transformation lien survolé + préfixes*/
	-webkit-transition-delay: 0s;
	-moz-transition-delay: 0s;
	transition-delay: 0s; /*délai transition lien survolé + préfixes*/
}
@keyframes bounceY { /*description animation chute et rebond(bounce) >bas + préfixes*/
	0% { transform: translateY(-200px);}
	40% { transform: translateY(-100px);}
	55% { transform: translateY(0px);}
	65% { transform: translateY(-52px);}
	75% { transform: translateY(0px);}
	82% { transform: translateY(-25px);}
	87% { transform: translateY(0px);}
	92% { transform: translateY(-12px);}
	97% { transform: translateY(0px);}
	100% { transform: translateY(0px);}
}
@-moz-keyframes bounceY {
	0% { -moz-transform: translateY(-200px);}
	40% { -moz-transform: translateY(-100px);}
	55% { -moz-transform: translateY(0px);}
	65% { -moz-transform: translateY(-52px);}
	75% { -moz-transform: translateY(0px);}
	82% { -moz-transform: translateY(-25px);}
	87% { -moz-transform: translateY(0px);}
	92% { -moz-transform: translateY(-12px);}
	97% { -moz-transform: translateY(0px);}
	100% { -moz-transform: translateY(0px);}
}
@-webkit-keyframes bounceY {
	0% { -webkit-transform: translateY(-200px);}
	40% { -webkit-transform: translateY(-100px);}
	55% { -webkit-transform: translateY(0px);}
	65% { -webkit-transform: translateY(-52px);}
	75% { -webkit-transform: translateY(0px);}
	82% { -webkit-transform: translateY(-25px);}
	87% { -webkit-transform: translateY(0px);}
	92% { -webkit-transform: translateY(-12px);}
	97% { -webkit-transform: translateY(0px);}
	100% { -webkit-transform: translateY(0px);}
}
/*fin hover style #8*/

Hover Style #9


/*hover style #9*/
.view-ninth .mask-1, .view-ninth .mask-2 {
	background: rgba(87, 30, 58, 0.5); /*couleur de fond des masques*/
	height: 284px; /*hauteur des masques =env.diagonale image*/
	width: 284px; /*largeur des masques =env.diagonale image*/
	opacity: 1; /*opacité1=visible*/
	-webkit-transition: all 0.3s ease-in-out 0.6s;
	-moz-transition: all 0.3s ease-in-out 0.6s;
	transition: all 0.3s ease-in-out 0.6s; /*temps et nature de transition + préfixes*/
}
.view-ninth .mask-1 {
	left: auto; /*position initiale masque1*/
	right: 0; /*position initiale masque1*/
	-webkit-transform: rotate(45deg) translateX(-142px);
	-moz-transform: rotate(45deg) translateX(-142px);
	transform: rotate(45deg) translateX(-142px); /*transformation masque1 : rotation >gauche + préfixes*/
	-webkit-transform-origin: 100% 0%;
	-moz-transform-origin: 100% 0%;
	transform-origin: 100% 0%; /*point d'origine transformation masque1 + préfixes*/
}
.view-ninth .mask-2 {
	top: auto; /*position initiale masque2*/
	bottom: 0; /*position initiale masque2*/
	-webkit-transform: rotate(45deg) translateX(142px);
	-moz-transform: rotate(45deg) translateX(142px);
	transform: rotate(45deg) translateX(142px); /*transformation masque2 : rotation >droite + préfixes*/
	-webkit-transform-origin: 0% 100%;
	-moz-transform-origin: 0% 100%;
	transform-origin: 0% 100%; /*point d'origine transformation masque2 + préfixes*/
}
.view-ninth .content {
	background: rgba(0, 0, 0, 0.8); /*couleur fond contenu*/
	height: 0; /*hauteur du contenu : 0=pas de hauteur*/
	opacity: 0.5; /*opacité*/
	width: 200px; /*largeur contenu*/
	overflow: hidden;
	-webkit-transform: rotate(-45deg) translate(-100px, 100px);
	-moz-transform: rotate(-45deg) translate(-100px, 100px);
	transform: rotate(-45deg) translate(-100px, 100px); /*transformation contenu : rotation >gauche >haut + préfixes*/
	-webkit-transform-origin: 0% 100%;
	-moz-transform-origin: 0% 100%;
	transform-origin: 0% 100%; /*point d'origine transformation contenu + préfixes*/
	-webkit-transition: all 0.4s ease-in-out 0.3s;
	-moz-transition: all 0.4s ease-in-out 0.3s;
	transition: all 0.4s ease-in-out 0.3s; /*temps et nature de transition + préfixes*/
}
.view-ninth h2 {
	background: transparent; /*couleur fond titre*/
	margin-top: 5px; /*marge haute titre*/
	border-bottom: 1px solid rgba(255, 255, 255, 0.5); /*bordure basse titre*/
}
.view-ninth a.info {
	display: none; /*pas d'affichage lien*/
}
.view-ninth:hover .content {
	height: 150px; /*hauteur contenu survolé*/
	width: 180px; /*largeur contenu survolé*/
	opacity: 0.7; /*opacité*/
	top: 140px; /*position haute contenu à ajuster !!*/
	left: -28px; /*position gauche contenu à ajuster !!*/
	-webkit-transform: rotate(0deg) translate(0, 0);
	-moz-transform: rotate(0deg) translate(0, 0);
	transform: rotate(0deg) translate(0, 0); /*transformation contenu survolé + préfixes*/
}
.view-ninth:hover .mask-1, .view-ninth:hover .mask-2 {
	-webkit-transition-delay: 0s;
	-moz-transition-delay: 0s;
	transition-delay: 0s; /*délai transition masques survolés + préfixes*/
}
.view-ninth:hover .mask-1 {
	-webkit-transform: rotate(45deg) translateX(1px);
	-moz-transform: rotate(45deg) translateX(1px);
	transform: rotate(45deg) translateX(1px); /*transformation masque1 survolé : rotation >droite + préfixes*/
}
.view-ninth:hover .mask-2 {
	-webkit-transform: rotate(45deg) translateX(-1px);
	-moz-transform: rotate(45deg) translateX(-1px);
	transform: rotate(45deg) translateX(-1px); /*transformation masque2 survolé : rotation >gauche + préfixes*/
}
/*fin hover style #9*/

Hover Style #10


/*hover style #10*/
.view-tenth #front-img {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	transform: scale(1); /*transformation image : échelle1 + préfixes*/
	-webkit-transition: all 0.7s ease-in-out;
	-moz-transition: all 0.7s ease-in-out;
	transition: all 0.7s ease-in-out; /*temps et nature de transition + préfixes*/
}
.view-tenth .mask {
	background-color: rgba(2, 81, 2, 0.3); /*couleur de fond du masque*/
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	transition: all 0.5s linear; /*temps et nature de transition + préfixes*/
	opacity: 0; /*opacité0=invisible*/
}
.view-tenth h2 {
	border-bottom: 1px solid rgba(0, 0, 0, 0.3); /*bordure basse titre*/
	background: transparent; /*couleur de fond du titre*/
	margin: 0px 20px 0px 5px; /*marges titre à ajuster*/
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	transform: scale(0); /*transformation titre : échelle0 + préfixes*/
	color: #333333; /*couleur du titre*/
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	transition: all 0.5s linear; /*temps et nature de transition + préfixes*/
	opacity: 0; /*opacité0=invisible*/
}
.view-tenth p {
	color: #333333; /*couleur du paragraphe*/
	margin-top: 10px; /*marge haute à ajuster*/
	opacity: 0; /*opacité0=invisible*/
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	transform: scale(0); /*transformation paragraphe : échelle0 + préfixes*/
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	transition: all 0.5s linear; /*temps et nature de transition + préfixes*/
}
.view-tenth a.info {
	opacity: 0; /*opacité0=invisible*/
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	transform: scale(0); /*transformation lien : échelle0 + préfixes*/
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	transition: all 0.5s linear; /*temps et nature de transition + préfixes*/
}
.view-tenth:hover #front-img {
	-webkit-transform: scale(10);
	-moz-transform: scale(10);
	transform: scale(10); /*transformation image survolée : échelle*10 + préfixes*/
	opacity: 0; /*opacité0=invisible*/
}
.view-tenth:hover .mask { /*masque survolé*/
	opacity: 1; /*opacité1=visible*/
}
.view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	transform: scale(1); /*transformation titre paragraphe lien survolés : échelle1 + préfixes*/
	opacity: 1; /*opacité1=visible*/
}
/*fin hover style #10*/

Code du corps de la page, de la boîte


<div style="display: inline-block;">
<div class="view view-first"><img id="front-img" src="images/tutoriels/images/image01.jpg" />
<div class="mask">
<h2>Hover Style #1</h2><!-- titre -->
<p>Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur d'adHoc.</p>
<a class="info" href="http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/" target="_blank">Lire plus</a>
</div><!-- fin mask -->
</div><!-- fin view view-first -->
</div><!-- fin inline-block -->

<div style="display: inline-block;">
<div class="view view-second"><img id="front-img" src="images/tutoriels/images/image02.jpg" />
<div class="mask">
<h2>Hover Style #2</h2><!-- titre -->
<p>Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur d'adHoc.</p>
<a class="info" href="http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/" target="_blank">Lire plus</a>
</div><!-- fin mask -->
</div><!-- fin view view-second -->
</div><!-- fin inline-block -->

<div style="display: inline-block;">
<div class="view view-third"><img id="front-img" src="images/tutoriels/images/image03.jpg" />
<div class="mask">
<h2>Hover Style #3</h2><!-- titre -->
<p>Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur d'adHoc.</p>
<a class="info" href="http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/" target="_blank">Lire plus</a>
</div><!-- fin mask -->
</div><!-- fin view view-third -->
</div><!-- fin inline-block -->


<div style="clear:both;">
</div>

<div style="display: inline-block;">
<div class="view view-fourth"><img id="front-img" src="images/tutoriels/images/image04.jpg" />
<div class="mask">
<h2>Hover Style #4</h2><!-- titre -->
<p>Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur d'adHoc.</p>
<a class="info" href="http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/" target="_blank">Lire plus</a>
</div><!-- fin mask -->
</div><!-- fin view view-fourth -->
</div><!-- fin inline-block -->


<div style="display: inline-block;">
<div class="view view-fifth"><img id="front-img" src="images/tutoriels/images/image05.jpg" />
<div class="mask">
<h2>Hover Style #5</h2><!-- titre -->
<p>Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur d'adHoc.</p>
<a class="info" href="http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/" target="_blank">Lire plus</a>
</div><!-- fin mask -->
</div><!-- fin view view-fifth -->
</div><!-- fin inline-block -->


<div style="display: inline-block;">
<div class="view view-sixth"><img id="front-img" src="images/tutoriels/images/image06.jpg" />
<div class="mask">
<h2>Hover Style #6</h2><!-- titre -->
<p>Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur d'adHoc.</p>
<a class="info" href="http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/" target="_blank">Lire plus</a>
</div><!-- fin mask -->
</div><!-- fin view view-sixth -->
</div><!-- fin inline-block -->


<div style="clear:both;">
</div>

<div style="display: inline-block;">
<div class="view view-seventh"><img id="front-img" src="images/tutoriels/images/image07.jpg" />
<div class="mask">
<h2>Hover Style #7</h2><!-- titre -->
<p>Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur d'adHoc.</p>
<a class="info" href="http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/" target="_blank">Lire plus</a>
</div><!-- fin mask -->
</div><!-- fin view view-seventh -->
</div><!-- fin inline-block -->


<div style="display: inline-block;">
<div class="view view-eighth"><img id="front-img" src="images/tutoriels/images/image08.jpg" />
<div class="mask">
<h2>Hover Style #8</h2><!-- titre -->
<p>Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur d'adHoc.</p>
<a class="info" href="http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/" target="_blank">Lire plus</a>
</div><!-- fin mask -->
</div><!-- fin view view-eighth -->
</div><!-- fin inline-block -->

<div style="display: inline-block;">
<div class="view view-ninth"><img id="front-img" src="images/tutoriels/images/image09.jpg" />
<div class="mask mask-1">
</div><!-- fin mask mask-1-->
<div class="mask mask-2">
</div><!-- fin mask mask-2-->
<div class="content">
<h2>Hover Style #9</h2><!-- titre -->
<p>Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur d'adHoc.</p>
</div><!-- fin content -->
</div><!-- fin view view-ninth -->
</div><!-- fin inline-block -->


<div style="clear:both;">
</div>

<div style="display: inline-block;">
<div class="view view-tenth"><img id="front-img" src="images/tutoriels/images/image10.jpg" />
<div class="mask">
<h2>Hover Style #10</h2><!-- titre -->
<p><img alt="sourire.png" src="images/smileys/sourire.png" style="border-width: 0px; border-style: solid; width: 20px; height: 20px;" /> Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur d'adHoc.</p>
<a class="info" href="http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/" target="_blank">Lire plus</a>
</div><!-- fin mask -->
</div><!-- fin view view-tenth -->
</div><!-- fin inline-block -->

<div style="display: inline-block;">
<div class="view0 view0-ninth"><img id="front-img" src="images/tutoriels/images/image13.jpg" />
<div class="mask mask-1">
</div><!-- fin mask mask-1-->
<div class="mask mask-2">
</div><!-- fin mask mask-2-->
<div class="content">
<h2>Hover Style #9bis</h2><!-- titre -->
<p>Une autre image de cet effet pour montrer les angles de rotation : ici 76° et -14°. Voir plus bas dans la page, le code et la méthode de calcul.</p>
</div><!-- fin content -->
</div><!-- fin view0 view0-ninth -->
</div><!-- fin inline-block -->

Hover Style complet pour exemple #9bis


/*STYLE pour #9bis*/
.view0 { /*attributs image*/
	width: 400px;
	height: 100px;
	margin: 5px; /*marges extérieures*/
	float: left;
	border: 0px solid #C0C0C0; /*bordure : épaisseur nature couleur*/
	overflow: hidden;
	position: relative;
	text-align: center;
	box-shadow: 1px 1px 2px #555; /*#346969;*/ /*ombre portée de la boite*/
	cursor: default;
	background: #C0C0C0; /*couleur de fond : apparait lors des transformations*/
	border-radius:6px; /*arrondis*/
}
.view0 .mask,.view0 .content { /*attributs masque et contenu : mêmes dimensions que ci-dessus*/
	width: 400px;
	height: 100px;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
}
.view0 #front-img {
	display: block;
	position: relative;
}
.view0 h2 { /*attributs titre*/
	color: #FFFFFF;
	text-align: center;
	position: relative;
	font-size: 13px;
	font-weight: bold;
	padding: 8px;
	background: rgba(0, 0, 0, 0.8);
	margin: 10px 0 0 0;
}
.view0 p { /*attributs paragraphe*/
	font-family: Arial, sans serif;
	font-style: italic;
	font-size: 11px;
	position: relative;
	color: #FFFFFF;
	background:transparent;
	padding: 5px 20px;
	text-align: center;
}

.view0-ninth .mask-1, .view0-ninth .mask-2 {
	background: rgba(52, 44, 41, 0.5); /*couleur de fond des masques*/
	height: 415px; /*hauteur des masques =env.diagonale image*/
	width: 415px; /*largeur des masques =env.diagonale image*/
	opacity: 1; /*opacité1=visible*/
	-webkit-transition: all 0.9s ease-in-out 0.6s;
	-moz-transition: all 0.9s ease-in-out 0.6s;
	transition: all 0.9s ease-in-out 0.6s; /*temps et nature de transition + préfixes*/
}
.view0-ninth .mask-1 {
	left: auto; /*position initiale masque1*/
	right: 0; /*position initiale masque1*/
	-webkit-transform: rotate(76deg) translateX(-125px);
	-moz-transform: rotate(76deg) translateX(-125px);
	transform: rotate(76deg) translateX(-125px); /*transformation masque1 : rotation >gauche + préfixes*/
	-webkit-transform-origin: 100% 0%;
	-moz-transform-origin: 100% 0%;
	transform-origin: 100% 0%; /*point d'origine transformation masque1 + préfixes*/
}
.view0-ninth .mask-2 {
	top: auto; /*position initiale masque2*/
	bottom: 0; /*position initiale masque2*/
	-webkit-transform: rotate(76deg) translateX(125px);
	-moz-transform: rotate(76deg) translateX(125px);
	transform: rotate(76deg) translateX(125px); /*transformation masque2 : rotation >droite + préfixes*/
	-webkit-transform-origin: 0% 100%;
	-moz-transform-origin: 0% 100%;
	transform-origin: 0% 100%; /*point d'origine transformation masque2 + préfixes*/
}
.view0-ninth .content {
	background: rgba(0, 0, 0, 0.8); /*couleur fond contenu*/
	height: 0; /*hauteur du contenu : 0=pas de hauteur*/
	opacity: 0.5; /*opacité*/
	width: 400px; /*largeur contenu*/
	overflow: hidden;
	-webkit-transform: rotate(-14deg) translate(-100px, 100px);
	-moz-transform: rotate(-14deg) translate(-100px, 100px);
	transform: rotate(-14deg) translate(-100px, 100px); /*transformation contenu : rotation >gauche >haut + préfixes*/
	-webkit-transform-origin: 0% 100%;
	-moz-transform-origin: 0% 100%;
	transform-origin: 0% 100%; /*point d'origine transformation contenu + préfixes*/
	-webkit-transition: all 0.4s ease-in-out 0.3s;
	-moz-transition: all 0.4s ease-in-out 0.3s;
	transition: all 0.4s ease-in-out 0.3s; /*temps et nature de transition + préfixes*/
}
.view0-ninth h2 {
	background: transparent; /*couleur fond titre*/
	margin-top: 2px; /*marge haute titre*/
	border-bottom: 1px solid rgba(255, 255, 255, 0.5); /*bordure basse titre*/
}
.view0-ninth:hover .content {
	height: 90px; /*hauteur contenu survolé*/
	width: 396px; /*largeur contenu survolé*/
	opacity: 0.7; /*opacité*/
	top: 135px; /*position haute contenu à ajuster !!*/
	left:-28px; /*position gauche contenu à ajuster !!*/
	-webkit-transform: rotate(0deg) translate(0, 0);
	-moz-transform: rotate(0deg) translate(0, 0);
	transform: rotate(0deg) translate(0, 0); /*transformation contenu survolé + préfixes*/
}
.view0-ninth:hover .mask-1, .view0-ninth:hover .mask-2 {
	-webkit-transition-delay: 0s;
	-moz-transition-delay: 0s;
	transition-delay: 0s; /*délai transition masques survolés + préfixes*/
}
.view0-ninth:hover .mask-1 {
	-webkit-transform: rotate(76deg) translateX(1px);
	-moz-transform: rotate(76deg) translateX(1px);
	transform: rotate(76deg) translateX(1px); /*transformation masque1 survolé : rotation >droite + préfixes*/
}
.view0-ninth:hover .mask-2 {
	-webkit-transform: rotate(76deg) translateX(-1px);
	-moz-transform: rotate(76deg) translateX(-1px);
	transform: rotate(76deg) translateX(-1px); /*transformation masque2 survolé : rotation >gauche + préfixes*/
}
/*FIN STYLE pour #9bis*/

NB : Dans le code source de la page, les parties du type [div style="display: inline-block;"]...[/div][!-- fin inline-block --] et [div  style="clear:both;"]...[/div] ne servent qu'à placer les images dans le flux, à passer à la ligne. Ce sont les parties du type [div class="view view-XXX"]...[/div][!-- fin view view-XXX --] qui sont obligatoires.

Mes images sont dans un dossier tutoriels/images placé dans le dossier images à la racine d'adHoc. Il faut évidemment adapter les sources à votre configuration.

Il est facile (une fois le système en place), dans l'éditeur de texte d'adHoc, de placer des images, des textes, des liens comme à votre habitude. Notez également l'id="front-img" qui permet de différencier l'image du devant et celle(s) que vous pourriez ajouter dans le contenu "caché".

→ Méthode de calcul des angles pour les masques de l'effet #9

Pour montrer l'utilisation d'autres images avec des formats différents et notamment pour l'effet #9, j'ai ajouté une image rectangulaire et son code complet associé #9bis dans l'onglet C. Notez les classes .view0 pour cet exemple afin de le différencier de la série précédente qui utilise les classes .view et les afficher dans la même page. L'image fait 400x100px. Il y a deux angles à calculer pour les rotations des masques (ICI, un rappel de la méthode trigonométrique de calcul). Donc un angle au sommet dont la tangente est de 400/100, ce qui correspond dans une table trigonométrique, ou avec la calculatrice scientifique à 75,96...° soit environ 76°. L'angle à la base mesure donc 90°-76° = 14°. Ce sont ces valeurs qui sont utilisées dans le code ci-dessus.

→ Ajout d'une indication de "Mise à jour" : deux méthodes.

1) Ajout d'une imagette "Mise à jour".

À la demande d'un utilisateur (Aramise), qui souhaitait ajouter une image de nouveauté ou du texte en superposition d'une image front-img pour signaler qu'un changement avait eu lieu sur la face cachée, j'ai proposé cette petite astuce, très simple à mettre en place.

Soit une imagette nommée MAJ.png au même niveau que les images "front-img". Transformez le code source en ajoutant entre les balises [span]...[/span] cette imagette à la position voulue, ici 10px du bas, 10px à droite.


<div style="display: inline-block;">
<div class="view view-first"><img id="front-img" src="images/tutoriels/images/image01.jpg" />
<span style="position: absolute; bottom:10px; right:10px;"><img id="front-img" src="images/tutoriels/images/MAJ.png" /></span>
<div class="mask">
<h2>Hover Style #1</h2><!-- titre -->
<p>Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur d'adHoc.</p>
<a class="info" href="http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/" target="_blank">Lire plus</a>
</div><!-- fin mask -->
</div><!-- fin view view-first -->
</div><!-- fin inline-block -->

Voici le rendu dans l'image #1.

Hover Style #1

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur d'adHoc.

Lire plus

2) Ajout d'un message de "Mise à jour".

Cet utilisateur m'a proposé une autre solution, un peu plus complexe avec un texte clignotant, mais cela nécessite l'ajout de style dans lequel on fixe les attributs de ce texte :


.MESSAGE  {
	position: absolute;
	right: 2%;
	top: 10%;
	width: 100%;
	text-align: right;
	font-size: 26px;
	color: #FF0000;
	font-weight: bold;
	animation-name: animationMESSAGE;
	animation-duration: 3s;
	animation-iteration-count: infinite;
}

@keyframes animationMESSAGE {
	0%{opacity: 1;}
	50%{opacity: 0;}
	100%{opacity: 1;}
}

Puis, il faut transformer le code source en ajoutant l'appel et le texte de ce message entre les balises [div]...[/div].


<div style="display: inline-block;">
<div class="view view-second"><img id="front-img" src="images/tutoriels/images/image02.jpg" />
<div class="MESSAGE">Mise à jour
</div>
<div class="mask">
<h2>Hover Style #2</h2><!-- titre -->
<p>Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur d'adHoc.</p>
<a class="info" href="http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/" target="_blank">Lire plus</a>
</div><!-- fin mask -->
</div><!-- fin view view-second -->
</div><!-- fin inline-block -->

Voici le rendu dans l'image #2.

Mise à jour

Hover Style #2

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur d'adHoc.

Lire plus

L'avantage de cette dernière solution est que l'on peut mettre le texte souhaité. L'inconvénient est que la règle installe la position pour toutes les images. Les deux solutions peuvent évidemment cohabiter...

Pour plus d'information sur cette mise en place, me contacter ou poster sur le forum.

Index |Info | Imprimer | Permalien

Les 10 derniers articles

adHoc

Module Formulaire

adHoc

Module Message

Carousels

Slideshow de textes (quote slideshow)

adHoc

Module Derniers

adHoc

Module Hasard

adHoc

Module Tri Index

adHoc

Module de Nouvelles-Blog

adHoc

Module de Téléchargements

adHoc

Module de Liens

adHoc

Fork et Extraction de boîte

Astuces

adHoc

Iframes responsives

Camera

Unite Gallery

Animations au survol

Autres astuces en CSS

Audio-Players

Carousels