adHoc.71site.fr Animations au survol

Animations au survol - Images avec Hover Effects Ideas-3

→ Des images avec Hover Effects Ideas -3

Voici la fin des 30 propositions de Mary Lou, que l'on peut trouver sur ce site.

Rappel : info licence : https://tympanus.net/codrops/licensing/ et images libres de droits : https://unsplash.com/

J'ai essayé de me rapprocher le plus fidèlement possible de ces propositions en adaptant et simplifiant quelquefois le code.

Cette troisième série présente les 6 derniers effets classés dans l'ordre alphabétique, mais qui utilisent une police d'icônes (Font Awesome : https://fontawesome.com/ ) et pour deux effets une image vectorielle. Le dossier contenant toutes les images de ce tutoriel et la police d'icônes est téléchargeable : HoverEffectImg.zip. En explorant la table des caractères de cette police et le fichier de style font-awesome.css, vous pourrez choisir et inclure les icônes qui vous conviennent.

30-zoe — Effect Zoe

Voici un paragraphe qui peut contenir un lien... etc...

Les codes utilisés sont ci-dessous.

Le contenu du premier onglet (onglet 0) : Style commun est obligatoire (strictement le même que sur les pages précédentes). Ensuite, ajouter au même endroit les codes de style correspondant aux effets souhaités :
onglet 1 : effets HERA - KIRA
onglet 2 : effets PHOEBE - TERRY
onglet 3 : effets WINSTON - ZOE
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_ideas.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_ideas.css" rel="stylesheet" />

si vous souhaitez utiliser des icônes, il est nécessaire de déclarer le fichier de style associé au début du code source ainsi (en adaptant à votre propre chemin si vous ne l'avez pas installé au même endroit que sur ce site) :


    <link charset="utf-8" href="images/tutoriels/HoverEffectImg/font-awesome-4.2.0/css/font-awesome.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 4) en adaptant les contenus, bien sûr.

0 1 2 3 4

Style commun


/* Style commun */
.grid { /*attributs de la grille*/
	position: relative;
	clear: both;
	margin: 0 auto; /*marges extérieures*/
	padding:0; /*marges intérieures*/
	max-width: 1000px; /*largeur maxi*/
	list-style: none;
	text-align: center;
}

.grid figure { /*attributs d'une figure*/
	position: relative;
	float: left;
	overflow: hidden;
	margin: 10px 1%; /*marges extérieures*/
	min-width: 300px; /*ôter les commentaires pour imposer une largeur mini*/
	max-width: 480px; /*largeur maxi*/
	max-height: 360px; /*hauteur maxi*/
	width: 48%; /*largeur*/
	background: #3085a3; /*couleur fond*/
	text-align: center;
	cursor: pointer;
}

.grid figure img { /*attributs d'une image*/
	position: relative;
	display: block;
	min-height: 100%; /*occupant toute la figure*/
	max-width: 100%;
	opacity: 0.8; /*opacité mais réglable ensuite pour chaque effet*/
}

.grid figure figcaption { /*figcaption : attributs des cadres mais réglable ensuite pour chaque effet*/
	padding:0; /*marges intérieures*/
	color: #fff; /*couleur*/
	font-family: "verdana", sans-serif;
	text-transform: uppercase; /*tout en majuscule*/
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.grid figure h2 { /*attributs du titre*/
	font-size: 2.5rem;  /*taille de la police*/
	font-weight: 100; /*gras de la police*/
	color: #fff; /*couleur*/
}

.grid figure h2 span { /*attributs du titre span*/
	font-weight: 1000; /*gras de la police*/
}

.grid figure h2,
.grid figure p { /*attributs des titres et paragraphe*/
	margin: 0; /*marges extérieures*/
}

.grid figure p { /*attributs du paragraphe*/
	font-size: 1.2rem; /*taille de la police*/
}

Effets HERA - KIRA


/*-----------------*/
/***** Hera ******/
/*-----------------*/

figure.effect-hera {
	background: #303fa9; /*couleur fond*/
}

figure.effect-hera h2 { /*titre*/
	width: 40%; /*largeur*/
}

figure.effect-hera h2,
figure.effect-hera p { /*titre et paragraphe*/
	position: absolute;
	top: 50%; /*positions*/
	left: 50%;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
	-webkit-transform: translate3d(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0); /*transformation : translationHV*/
	-webkit-transform-origin: 50%;
	transform-origin: 50%;
}

figure.effect-hera figcaption::before { /*figcaption pseudo-élément pour dessiner le cadre*/
	position: absolute;
	top: 50%; /*positions*/
	left: 50%;
	width: 12rem; /*largeur*/
	height: 12rem; /*hauteur*/
	border: .2rem solid #fff; /*épaisseur nature couleur bordure*/
	content: ''; /*NE PAS SUPPRIMER*/
	opacity: 0; /*opacité*/
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
	-webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1);
	transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1); /*transformation : translationHV rotation échelle*/
	-webkit-transform-origin: 50%;
	transform-origin: 50%;
}

figure.effect-hera p { /*paragraphe*/
	width: 12rem; /*largeur*/
	font-size:2rem; /*taille police -icones-*/
}

figure.effect-hera p a { /*icones du paragraphe*/
	color: #fff; /*couleur*/
}

figure.effect-hera p a:hover,
figure.effect-hera p a:focus { /*icones du paragraphe au survol*/
	color: rgba(254,74,65,0.8); /*couleur et opacité*/
}

figure.effect-hera p a icone { /*icones du paragraphe*/
	opacity: 0; /*opacité*/
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
}

figure.effect-hera p a:nth-child(1) icone { /*icone1*/
	position: absolute;
	top: -6rem; /*positions*/
	left: 0rem;
}
figure.effect-hera:hover p a:nth-child(1) icone { /*icone1 au survol*/
	-webkit-transform: translate3d(3rem,3rem,0);
	transform: translate3d(3rem,3rem,0); /*transformation : translationHV*/
}

figure.effect-hera p a:nth-child(2) icone { /*icone2*/
	position: absolute;
	top: -6rem; /*positions*/
	right: 0rem;
}
figure.effect-hera:hover p a:nth-child(2) icone { /*icone2 au survol*/
	-webkit-transform: translate3d(-3rem,3rem,0);
	transform: translate3d(-3rem,3rem,0); /*transformation : translationHV*/
}

figure.effect-hera p a:nth-child(3) icone { /*icone3*/
	position: absolute;
	top: 4rem; /*positions*/
	left: 0rem;
}
figure.effect-hera:hover p a:nth-child(3) icone { /*icone3 au survol*/
	-webkit-transform: translate3d(3rem,-3rem,0);
	transform: translate3d(3rem,-3rem,0); /*transformation : translationHV*/
}

figure.effect-hera p a:nth-child(4) icone { /*icone4*/
	position: absolute;
	top: 4rem; /*positions*/
	right: 0rem;
}
figure.effect-hera:hover p a:nth-child(4) icone { /*icone4 au survol*/
	-webkit-transform: translate3d(-3rem,-3rem,0);
	transform: translate3d(-3rem,-3rem,0); /*transformation : translationHV*/
}

figure.effect-hera:hover p a icone { /*icones du paragraphe au survol*/
	opacity: 1; /*opacité*/
}

figure.effect-hera:hover figcaption::before { /*figcaption pseudo-élément au survol*/
	opacity: 1; /*opacité*/
	-webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(1,1,1);
	transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(1,1,1); /*transformation : translationHV rotation échelle*/
}

figure.effect-hera:hover h2 { /*titre au survol*/
	opacity: 0; /*opacité*/
	-webkit-transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);
	transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1); /*transformation : translationHV échelle*/
}

/*-----------------*/
/****** Kira ******/
/*-----------------*/

figure.effect-kira {
	background: #fff; /*couleur fond*/
	text-align: left; /*alignement*/
}

figure.effect-kira img { /*image*/
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s; /*temps de transition*/
}

figure.effect-kira figcaption {
	z-index: 1;
}

figure.effect-kira h2 { /*titre*/
	margin:1rem 2rem 0; /*marges extérieures*/
}

figure.effect-kira p { /*paragraphe*/
	padding: 1.5rem 3rem; /*marges intérieures*/
	font-size: 2rem; /*taille police -icones-*/
	opacity: 0; /*opacité*/
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
	-webkit-transform: translate3d(0,-1rem,0);
	transform: translate3d(0,-1rem,0); /*transformation : translationV*/
}

figure.effect-kira p a { /*icones du paragraphe*/
	margin: 0 1rem; /*marges extérieures*/
	color: #101010; /*couleur*/
}

figure.effect-kira p a:hover,
figure.effect-kira p a:focus { /*icones du paragraphe au survol*/
	color: rgba(254,74,65,0.8); /*couleur et opacité*/
}

figure.effect-kira figcaption::before { /*figcaption pseudo-élément créant le bandeau du titre*/
	position: absolute;
	top: .5rem; /*positions*/
	right: 2rem;
	left: 2rem;
	z-index: -1;
	height: 4rem; /*hauteur*/
	background: #fff; /*couleur*/
	content: ''; /*NE PAS SUPPRIMER*/
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
	-webkit-transform: translate3d(0,5rem,0) scale3d(1,0.023,1) ;
	transform: translate3d(0,5rem,0) scale3d(1,0.023,1); /*transformation : translationV échelle*/
	-webkit-transform-origin: 50% 0;
	transform-origin: 50% 0;
}

figure.effect-kira:hover img { /*image au survol*/
	opacity: 0.7; /*opacité*/
}

figure.effect-kira:hover p { /*paragraphe au survol*/
	opacity: 1; /*opacité*/
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0); /*transformation : translation0*/
}

figure.effect-kira:hover figcaption::before { /*figcaption pseudo-élément au survol*/
	opacity: 0.7; /*opacité*/
	-webkit-transform: translate3d(0,4rem,0) scale3d(1,1,1) ;
	transform: translate3d(0,4rem,0) scale3d(1,1,1); /*transformation : translationV échelle*/
}

Effets PHOEBE - TERRY


/*-----------------*/
/**** Phoebe ****/
/*-----------------*/

figure.effect-phoebe {
	background: #675983; /*couleur fond*/
}

figure.effect-phoebe img { /*image*/
	opacity: 0.85; /*opacité*/
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s; /*temps de transition*/
}

figure.effect-phoebe:hover img { /*image au survol*/
	opacity: 0.6; /*opacité*/
}

figure.effect-phoebe figcaption::before { /*figcaption pseudo-élément utilisant l'image "triangle2"*/
	position: absolute;
	top: 0; /*positions*/
	left: 0;
	width: 100%; /*largeur*/
	height: 100%; /*hauteur*/
	background: url(..\..\images/tutoriels/HoverEffectImg/triangle2.svg) no-repeat center center; /*appel de l'image svg*/
	background-size: 100% 100%;
	content: ''; /*NE PAS SUPPRIMER*/
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
	-webkit-transform: scale3d(5,2.5,1);
	transform: scale3d(5,2.5,1); /*transformation : échelle*/
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

figure.effect-phoebe:hover figcaption::before { /*figcaption pseudo-élément au survol*/
	opacity: 0.6; /*opacité*/
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1); /*transformation : échelle*/
}

figure.effect-phoebe h2 { /*titre*/
	width:50%; /*largeur*/
	margin:3rem auto 0; /*marges extérieures*/
	-webkit-transition: transform 0.35s;
	transition: transform 0.35s; /*temps de transition*/
	-webkit-transform: translate3d(0,4rem,0);
	transform: translate3d(0,4rem,0); /*transformation : translationV*/
}

figure.effect-phoebe:hover h2 { /*titre au survol*/
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0); /*transformation : translation0*/
}

figure.effect-phoebe p a { /*icones du paragraphe*/
	color: #fff; /*couleur*/
	font-size: 2rem; /*taille police -icones-*/
	opacity: 0; /*opacité*/
	position: relative;
	display: inline-block;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
}

figure.effect-phoebe a:hover,
figure.effect-phoebe a:focus { /*icones au survol*/
	color: #cc6055; /*couleur*/
}

figure.effect-phoebe p a:nth-child(1) { /*icone1*/
	-webkit-transform: translate3d(-6rem,-6rem,0);
	transform: translate3d(-6rem,-6rem,0); /*transformation : translationHV*/
}

figure.effect-phoebe p a:nth-child(2) { /*icone2*/
	-webkit-transform: translate3d(0,6rem,0);
	transform: translate3d(0,6rem,0); /*transformation : translationV*/
}

figure.effect-phoebe p a:nth-child(3) { /*icone3*/
	-webkit-transform: translate3d(6rem,-6rem,0);
	transform: translate3d(6rem,-6rem,0); /*transformation : translationHV*/
}

figure.effect-phoebe:hover p a { /*icones du paragraphe au survol*/
	opacity: 1; /*opacité*/
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0); /*transformation : translation0*/
}

/*-----------------*/
/***** Terry ******/
/*-----------------*/

figure.effect-terry {
	background: #34495e; /*couleur fond*/
}

figure.effect-terry figcaption::before,
figure.effect-terry figcaption::after { /*figcaption pseudo-éléments créant le cadre*/
	position: absolute;
	width: 100%; /*largeur*/
	height: 100%; /*hauteur*/
	border-style: solid; /*nature bordure*/
	border-color: #101010; /*couleur bordure*/
	content: ''; /*NE PAS SUPPRIMER*/
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s; /*temps de transition*/
}

figure.effect-terry figcaption::before { /*figcaption pseudo-élément créant une partie du cadre*/
	right: 0; /*positions*/
	bottom: 0;
	border-width: 0 4.5rem 4.5rem 0; /*épaisseur bordure*/
	-webkit-transform: translate3d(4.5rem,4.5rem,0);
	transform: translate3d(4.5rem,4.5rem,0); /*transformation : translationHV*/
}

figure.effect-terry figcaption::after { /*figcaption pseudo-élément créant l'autre partie du cadre*/
	top: 0; /*positions*/
	left: 0;
	border-width: 1rem 0 0 1rem; /*épaisseur bordure*/
	-webkit-transform: translate3d(-1rem,-1rem,0);
	transform: translate3d(-1rem,-1rem,0); /*transformation : translationHV*/
}

figure.effect-terry img,
figure.effect-terry p a { /*image et icones du paragraphe*/
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
}

figure.effect-terry img { /*image*/
	opacity: 0.85; /*opacité*/
}

figure.effect-terry h2 { /*titre*/
	position: absolute;
	bottom: 0; /*positions*/
	right: 2.5rem;
	padding: 1rem .5rem; /*marges intérieures*/
	width: 100%; /*largeur*/
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s; /*temps de transition*/
	-webkit-transform: translate3d(6rem,0,0);
	transform: translate3d(6rem,0,0); /*transformation : translationH*/
}

figure.effect-terry p { /*paragraphe*/
	float: right;
	clear: both;
	text-align: left; /*alignement*/
	font-size: 2rem; /*taille police -icones-*/
}

figure.effect-terry p a { /*icones du paragraphe*/
	display: block;
	margin:1rem .9rem 0 0; /*marges extérieures*/
	color: #fff; /*couleur*/
	opacity: 0; /*opacité*/
	-webkit-transform: translate3d(8rem,0,0);
	transform: translate3d(8rem,0,0); /*transformation : translationH*/
}

figure.effect-terry p a:hover,
figure.effect-terry p a:focus { /*icones du paragraphe au survol*/
	color: #f3cf3f; /*couleur*/
}

figure.effect-terry:hover figcaption::before,
figure.effect-terry:hover figcaption::after { /*figcaption pseudo-éléments au survol*/
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0); /*transformation : translation0*/
}

figure.effect-terry:hover img { /*image au survol*/
	opacity: 0.6; /*opacité*/

}

figure.effect-terry:hover h2,
figure.effect-terry:hover p a { /*titre et icones du paragraphe au survol*/
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0); /*transformation : translation0*/
}

figure.effect-terry:hover p a { /*icones du paragraphe au survol*/
	opacity: 1; /*opacité*/
}

figure.effect-terry:hover p a:nth-child(1) { /*icone1 au survol*/
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s; /*délai de transition*/
}

figure.effect-terry:hover p a:nth-child(2) { /*icone2 au survol*/
	-webkit-transition-delay: 0.10s;
	transition-delay: 0.10s; /*délai de transition*/
}

figure.effect-terry:hover p a:nth-child(3) { /*icone3 au survol*/
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s; /*délai de transition*/
}

figure.effect-terry:hover p a:nth-child(4) { /*icone4 au survol*/
	-webkit-transition-delay: 0.20s;
	transition-delay: 0.20s; /*délai de transition*/
}

Effets WINSTON - ZOE


/*-----------------*/
/*** Winston ****/
/*-----------------*/

figure.effect-winston {
	background: #162633; /*couleur fond*/
	text-align: left; /*alignement*/
}

figure.effect-winston img { /*image*/
	-webkit-transition: opacity 0.45s;
	transition: opacity 0.45s; /*temps de transition*/
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure.effect-winston figcaption::before { /*figcaption pseudo-élément utilisant l'image "triangle"*/
	position: absolute;
	top: 0; /*positions*/
	left: 0;
	width: 100%; /*largeur*/
	height: 100%; /*hauteur*/
	background: url(..\..\images/tutoriels/HoverEffectImg/triangle.svg) no-repeat center center; /*appel de l'image svg*/
	background-size: 100% 100%;
	content: ''; /*NE PAS SUPPRIMER*/
	-webkit-transition: opacity 0.45s, -webkit-transform 0.45s;
	transition: opacity 0.45s, transform 0.45s; /*temps de transition*/
	-webkit-transform: rotate3d(0,0,1,45deg);
	transform: rotate3d(0,0,1,45deg); /*transformation : rotation*/
	-webkit-transform-origin: 0 100%;
	transform-origin: 0 100%;
}

figure.effect-winston h2 { /*titre*/
	width: 60%; /*largeur*/
	padding:2rem 2.5rem; /*marges intérieures*/
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s; /*temps de transition*/
	-webkit-transform: translate3d(0,2rem,0);
	transform: translate3d(0,2rem,0); /*transformation : translationV*/
}

figure.effect-winston p { /*paragraphe*/
	position: absolute;
	right: 0; /*positions*/
	bottom: 0;
	padding: 0 1rem 1rem 0; /*marges intérieures*/
}

figure.effect-winston a { /*icones*/
	margin: 0 .5rem; /*marges extérieures*/
	color: #5d504f; /*couleur*/
	font-size: 2rem; /*taille police -icones-*/
}

figure.effect-winston a:hover,
figure.effect-winston a:focus { /*icones au survol*/
	color: #cc6055; /*couleur*/
}

figure.effect-winston p a icone { /*icones du paragraphe*/
	opacity: 0; /*opacité*/
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
	-webkit-transform: translate3d(0,5rem,0);
	transform: translate3d(0,5rem,0); /*transformation : translationV*/
}

figure.effect-winston:hover img { /*image au survol*/
	opacity: 0.6; /*opacité*/
}

figure.effect-winston:hover h2 { /*titre au survol*/
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0); /*transformation : translation0*/
}

figure.effect-winston:hover figcaption::before { /*figcaption pseudo-élément au survol*/
	opacity: 0.7; /*opacité*/
	-webkit-transform: rotate3d(0,0,1,20deg);
	transform: rotate3d(0,0,1,20deg); /*transformation : rotation*/
}

figure.effect-winston:hover p icone { /*icones du paragraphe au survol*/
	opacity: 1; /*opacité*/
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0); /*transformation : translation0*/
}

figure.effect-winston:hover p a:nth-child(3) icone { /*icone3 au survol*/
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s; /*délai de transition*/
}

figure.effect-winston:hover p a:nth-child(2) icone { /*icone2 au survol*/
	-webkit-transition-delay: 0.20s;
	transition-delay: 0.20s; /*délai de transition*/
}

figure.effect-winston:hover p a:nth-child(1) icone { /*icone1 au survol*/
	-webkit-transition-delay: 0.30s;
	transition-delay: 0.30s; /*délai de transition*/
}

/*---------------*/
/***** Zoe *****/
/*---------------*/

figure.effect-zoe figcaption {
	top: auto; /*positions*/
	bottom: 0;
	padding: 1rem; /*marges intérieures*/
	height: 4.5rem; /*hauteur*/
	background: rgba(255,255,255,.7); /*couleur fond et opacité*/
	color: #3c4a50; /*couleur*/
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s; /*temps de transition*/
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0); /*transformation : translationV*/
}

figure.effect-zoe h2 { /*titre*/
	float: left;
}

figure.effect-zoe p a icone { /*icones du paragraphe*/
	float: left;
	color: #3c4a50; /*couleur*/
	font-size: 2rem; /*taille police -icones-*/
	margin:.5rem 0 0 .5rem; /*marges extérieures*/
}

figure.effect-zoe p a icone:hover,
figure.effect-zoe p a icone:focus { /*icones du paragraphe au survol*/
	color: #cc6055; /*couleur*/
}

figure.effect-zoe p.description { /*texte du paragraphe*/
	position: absolute;
	margin:0 4rem 0 2rem; /*marges extérieures*/
	bottom: 8rem; /*position*/
	color:#fff; /*couleur*/
	opacity: 0; /*opacité*/
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s; /*temps de transition*/
}

figure.effect-zoe h2,
figure.effect-zoe p a { /*titre et paragraphe*/
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s; /*temps de transition*/
	-webkit-transform: translate3d(0,5rem,0);
	transform: translate3d(0,5rem,0); /*transformation : translationV*/
}


figure.effect-zoe h2 { /*titre*/
	display: inline-block;
}

figure.effect-zoe:hover p.description { /*texte du paragraphe au survol*/
	opacity: 1; /*opacité*/
}

figure.effect-zoe:hover figcaption,
figure.effect-zoe:hover h2,
figure.effect-zoe:hover p a { /*titre et icones du paragraphe au survol*/
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0); /*transformation : translation0*/
}

figure.effect-zoe:hover h2 { /*titre au survol*/
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s; /*délai de transition*/
}

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


<div class="grid">
<figure class="effect-hera"><img alt="25-hera" src="images/tutoriels/HoverEffectImg/25-hera.jpg" />
<figcaption>
<div>
<h2>Effect <span>Hera</span></h2>
<p>
<a href="https://fontawesome.com/" target="_blank" title="pdf"><icone class="fa fa-fw fa-file-pdf-o"></icone></a>
<a href="https://fontawesome.com/" target="_blank" title="image"><icone class="fa fa-fw fa-file-image-o"></icone></a>
<a href="https://fontawesome.com/" target="_blank" title="archive"><icone class="fa fa-fw fa-file-archive-o"></icone></a>
<a href="https://fontawesome.com/" target="_blank" title="code"><icone class="fa fa-fw fa-file-code-o"></icone></a>
</p>
</div>
</figcaption>
</figure>

<figure class="effect-kira"><img alt="26-kira" src="images/tutoriels/HoverEffectImg/26-kira.jpg" />
<figcaption>
<div>
<h2>Effect <span>Kira</span></h2>
<p>
<a href="https://fontawesome.com/" target="_blank" title="home"><icone class="fa fa-fw fa-home"></icone></a>
<a href="https://fontawesome.com/" target="_blank" title="download"><icone class="fa fa-fw fa-download"></icone></a>
<a href="https://fontawesome.com/" target="_blank" title="heart"><icone class="fa fa-fw fa-heart"></icone></a>
<a href="https://fontawesome.com/" target="_blank" title="share"><icone class="fa fa-fw fa-share"></icone></a>
</p>
</div>
</figcaption>
</figure>

<figure class="effect-phoebe"><img alt="27-phoebe" src="images/tutoriels/HoverEffectImg/27-phoebe.jpg" />
<figcaption>
<div>
<h2>Effect <span>Phoebe</span></h2>
<p>
<a href="https://fontawesome.com/" target="_blank" title="user"><icone class="fa fa-fw fa-user"></icone></a>
<a href="https://fontawesome.com/" target="_blank" title="heart"><icone class="fa fa-fw fa-heart"></icone></a>
<a href="https://fontawesome.com/" target="_blank" title="cog"><icone class="fa fa-fw fa-cog"></icone></a>
</p>
</div>
</figcaption>
</figure>

<figure class="effect-terry"><img alt="28-terry" src="images/tutoriels/HoverEffectImg/28-terry.jpg" />
<figcaption>
<div>
<h2>Effect <span>Terry</span></h2>
<p><a href="https://fontawesome.com/" target="_blank" title="download"><icone class="fa fa-fw fa-download"></icone></a>
<a href="https://fontawesome.com/" target="_blank" title="heart"><icone class="fa fa-fw fa-heart"></icone></a>
<a href="https://fontawesome.com/" target="_blank" title="share"><icone class="fa fa-fw fa-share"></icone></a>
<a href="https://fontawesome.com/" target="_blank" title="tags"><icone class="fa fa-fw fa-tags"></icone></a>
</p>
</div>
</figcaption>
</figure>

<figure class="effect-winston"><img alt="29-winston" src="images/tutoriels/HoverEffectImg/29-winston.jpg" />
<figcaption>
<div>
<h2>Effect <span>Winston</span></h2>
<p>
<a href="https://fontawesome.com/" target="_blank" title="star"><icone class="fa fa-fw fa-star-o"></icone></a>
<a href="https://fontawesome.com/" target="_blank" title="comments"><icone class="fa fa-fw fa-comments-o"></icone></a>
<a href="https://fontawesome.com/" target="_blank" title="envelope"><icone class="fa fa-fw fa-envelope-o"></icone></a>
</p>
</div>
</figcaption>
</figure>

<figure class="effect-zoe"><img alt="30-zoe" src="images/tutoriels/HoverEffectImg/30-zoe.jpg" />
<figcaption>
<div>
<h2>Effect <span>Zoe</span></h2>
<p class="description">Voici un paragraphe qui peut contenir un lien... etc...</p>
<p>
<a href="https://fontawesome.com/" target="_blank" title="paperclip"><icone class="fa fa-fw fa-paperclip"></icone></a>
<a href="https://fontawesome.com/" target="_blank" title="eye"><icone class="fa fa-fw fa-eye"></icone></a>
<a href="https://fontawesome.com/" target="_blank" title="link"><icone class="fa fa-fw fa-link"></icone></a>
</p>
</div>
</figcaption>
</figure>
</div><!-- fin grid -->

Pour les effets Phoebe et Winston, le code du style appelle des images vectorielles (triangle.svg et triangle2.svg situés au même niveau que les images), il faut adapter les chemins à votre configuration.

Attention ! J'ai placé volontairement des barres obliques inversées ( \ antislashs) à la place des barres obliques (/ slashs) dans les urls de ces images afin que les chemins s'affichent totalement, n'oubliez pas de rétablir des barres obliques correctes dans vos chemins.

Dans le code du corps de la page ou de la boîte (onglet 4) ci-dessus, l'organisation assez simple. Il faut placer toutes les parties [figure class="effect-xxxx"]...[/figure] dans un [div class="grid"]...[/div].

Le contenu est évidemment à adapter à vos besoins. Il est très simple d'inclure dans les titres ou les paragraphes : des images, des liens directement dans l'éditeur d'adHoc en se servant des outils habituels. Mes images, ici (480*360px), sont dans un dossier tutoriels/HoverEffectImg placé dans le dossier images à la racine d'adHoc. Il faut adapter les sources à votre configuration.

Il y a également les appels aux icônes... Cet appel est dans une classe spécifique pour chaque icône dans des balises nommées icone... [icone class="fa fa-fw fa-download"][/icone] par exemple... En éditant le fichier de style font-awesome.css, vous pourrez choisir les classes des icônes qui vous conviennent.

Dans le style commun, pour les classes grid et figure, il conviendra d'adapter les dimensions à votre convenance, et notamment les pourcentages ainsi que le min-width afin que les images ne soient pas inférieures à 300px par exemple pour les smartphones. Les valeurs dans les effets seront donc à adapter.

Sur les écrans tactiles, smartphones, tablettes... l'effet de survol, évidemment ne fonctionne pas et il faut "cliquer" pour déclencher l'effet.

Me contacter sur le forum de ce site pour toute question ou aide pour utiliser ces procédures.

Index |Info | Imprimer | Permalien

adHoc.71site.fr

Animations au survol - Images avec Hover Effects Ideas-3

→ Des images avec Hover Effects Ideas -3

Effect Hera

Effect Kira

Effect Phoebe

Effect Terry

Effect Winston

Effect Zoe

Style commun

Effets HERA - KIRA

Effets PHOEBE - TERRY

Effets WINSTON - ZOE

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

Les 8 derniers articles