adHoc.71site.fr Animations au survol

Animations au survol - Images avec Hover Effects Ideas-2

→ Des images avec Hover Effects Ideas -2

Voici la suite 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 deuxième série montre 12 effets suivants, classés par ordre alphabétique.

Le dossier contenant toutes les images de ces tutoriels et la police d'icônes est téléchargeable : HoverEffectImg.zip.

13-marley — Effect Marley

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

14-milo — Effect Milo

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

15-ming — Effect Ming

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

16-moses — Effect Moses

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

17-oscar — Effect Oscar

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

18-romeo — Effect Romeo

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

19-roxy — Effect Roxy

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

20-ruby — Effect Ruby

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

21-sadie — Effect Sadie

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

22-sarah — Effect Sarah

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

23-selena — Effect Selena

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

24-steve — Effect Steve

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 la page précédente). Ensuite, ajouter au même endroit les codes de style correspondant aux effets souhaités :
onglet 1 : effets MARLEY - MILO - MING
onglet 2 : effets MOSES - OSCAR - ROMEO
onglet 3 : effets ROXY - RUBY - SADIE
onglet 4 : effets SARAH - SELENA - STEVE
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" />

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 5) en adaptant les contenus, bien sûr.

0 1 2 3 4 5

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 MARLEY - MILO - MING


/*---------------*/
/*** Marley ****/
/*---------------*/

figure.effect-marley figcaption {
	text-align: right; /*alignement*/
}

figure.effect-marley h2,
figure.effect-marley p { /*titre et paragraphe*/
	position: absolute;
	right: 2rem; /*positions*/
	left: 2rem;
	padding: 1rem 0; /*marges intérieures*/
}


figure.effect-marley p { /*paragraphe*/
	bottom: 3rem; /*position*/
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0); /*transformation : translationV*/
}

figure.effect-marley h2 { /*titre*/
	-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-marley:hover h2 { /*titre au survol*/
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0); /*transformation : translation0*/
}

figure.effect-marley h2::after { /*pseudo-élément après le titre qui crée la ligne*/
	position: absolute;
	top: 100%; /*positions*/
	left: 0;
	width: 100%; /*largeur*/
	height: .3rem; /*hauteur*/
	background: #fff; /*couleur*/
	content: ''; /*NE PAS SUPPRIMER*/
	-webkit-transform: translate3d(0,4rem,0);
	transform: translate3d(0,4rem,0); /*transformation : translationV*/
}

figure.effect-marley h2::after,
figure.effect-marley p { /*pseudo-élément après le titre et 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-marley:hover h2::after,
figure.effect-marley:hover p { /*pseudo-élément après le titre et paragraphe au survol*/
	opacity: 1; /*opacité*/
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0); /*transformation : translation0*/
}

/*---------------*/
/***** Milo *****/
/*---------------*/

figure.effect-milo {
	background: #2e5d5a; /*couleur fond*/
}

figure.effect-milo img { /*image*/
	opacity: 1; /*opacité*/
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
	-webkit-transform: translate3d(-3rem,0,0) scale(1.23);
	transform: translate3d(-3rem,0,0) scale(1.23); /*transformation : translationH et échelle*/
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure.effect-milo:hover img { /*image au survol*/
	opacity: 0.8; /*opacité*/
	-webkit-transform: translate3d(0,0,0) scale(1);
	transform: translate3d(0,0,0) scale(1); /*transformation : translation0 et échelle*/
}

figure.effect-milo h2 { /*titre*/
	position: absolute;
	right: 0; /*positions*/
	bottom: 0;
	padding:1.5rem; /*marges intérieures*/
}

figure.effect-milo p { /*paragraphe*/
	margin-top:1rem; /*marge extérieure haute*/
	padding: 0 1rem; /*marges intérieures*/
	width: 50%; /*largeur*/
	border-right: 1px solid #fff; /*épaisseur, nature, couleur bordure droite*/
	text-align: right; /*alignement*/
	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(-4rem,0,0);
	transform: translate3d(-4rem,0,0); /*transformation : translationH*/
}

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

/*---------------*/
/**** Ming *****/
/*---------------*/

figure.effect-ming {
	background: #030c17; /*couleur fond*/
}

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

figure.effect-ming figcaption::before { /*figcaption pseudo-élément créant le cadre*/
	position: absolute;
	top: 1.5rem; /*positions*/
	right: 1.5rem;
	bottom: 2rem;
	left: 1.5rem;
	border: .15rem solid #fff; /*épaisseur nature et couleur bordure*/
	box-shadow: 0 0 0 3.5rem rgba(255,255,255,0.2); /*ombre portée*/
	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: scale3d(1.4,1.4,1);
	transform: scale3d(1.4,1.4,1); /*transformation : échelle*/
}

figure.effect-ming h2 { /*titre*/
	margin: 20% 0 1rem 0; /*marges extérieures*/
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s; /*temps de transition*/
}

figure.effect-ming p { /*paragraphe*/
	padding:1rem 2rem; /*marges intérieures*/
	opacity: 0; /*opacité*/
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
	-webkit-transform: scale(1.5);
	transform: scale(1.5); /*transformation : échelle*/
}

figure.effect-ming:hover h2 { /*titre au survol*/
	-webkit-transform: scale(0.9);
	transform: scale(0.9); /*transformation : échelle*/
}

figure.effect-ming:hover figcaption::before,
figure.effect-ming:hover p { /*figcaption pseudo-élément créant le cadre et paragraphe au survol*/
	opacity: 1; /*opacité*/
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1); /*transformation : échelle*/
}

figure.effect-ming:hover figcaption { /*figcaption au survol*/
	background-color: rgba(58,52,42,0.1); /*couleur fond et opacité*/
}

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

Effets MOSES - OSCAR - ROMEO


/*-----------------*/
/**** Moses *****/
/*-----------------*/

figure.effect-moses {
	background: -webkit-linear-gradient(-45deg, #ffffff 0%,#000000 100%);
	background: linear-gradient(-45deg, #ffffff 0%,#000000 100%); /*couleur fond*/
}

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

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

figure.effect-moses h2 { /*titre*/
	margin-top: 5%; /*marge extérieure haute*/
	margin-left:5%; /*marge extérieure gauche*/
	width: 45%; /*largeur*/
	height: 50%; /*hauteur*/
	text-align: center; /*alignement*/
	border: 1px solid #fff; /*épaisseur nature et couleur bordure*/
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s; /*temps de transition*/
	-webkit-transform: translate3d(.5rem,.5rem,0);
	transform: translate3d(.5rem,.5rem,0); /*transformation : translationsHV*/
}

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

figure.effect-moses p { /*paragraphe*/
	float: right;
	margin-right:5%; /*marge extérieure droite*/
	padding: .5rem; /*marges intérieures*/
	width: 45%; /*largeur*/
	height: 50%; /*hauteur*/
	text-align: right; /*alignement*/
	border: 1px solid #fff; /*épaisseur nature et couleur bordure*/
	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);
	transform: translate3d(-50%,-50%,0); /*transformation : translationsHV*/
}

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

/*---------------*/
/**** Oscar ****/
/*---------------*/

figure.effect-oscar {
	background: -webkit-linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
	background: linear-gradient(45deg, #22682a 0%,#9b4a1b 40%,#3a342a 100%); /*couleur de fond*/
}

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

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

figure.effect-oscar figcaption { /*figcaption*/
	background-color: rgba(58,52,42,0.3); /*couleur de fond et opacité*/
	-webkit-transition: background-color 0.35s;
	transition: background-color 0.35s; /*temps de transition*/
}

figure.effect-oscar:hover figcaption { /*figcaption au survol*/
	background-color: rgba(58,52,42,0); /*couleur de fond et opacité*/
}

figure.effect-oscar figcaption::before { /*figcaption pseudo-élément créant le cadre*/
	position: absolute;
	top: 1.5rem; /*positions*/
	right: 1.5rem;
	bottom: 1.5rem;
	left: 1.5rem;
	border: 1px solid #fff; /*largeur, type et couleur de bordure*/
	content: ''; /*NE PAS SUPPRIMER*/
}

figure.effect-oscar h2 { /*titre*/
	margin: 20% 0 1rem 0; /*marges extérieures*/
	-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-oscar figcaption::before,
figure.effect-oscar p { /*figcaption pseudo-élément et paragraphe*/
	padding:0 4rem; /*marges intérieures*/
	opacity: 0; /*opacité*/
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
	-webkit-transform: scale(0);
	transform: scale(0); /*transformation : échelle*/
}

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

figure.effect-oscar:hover figcaption::before,
figure.effect-oscar:hover p { /*figcaption pseudo-élément et paragraphe au survol*/
	opacity: 1; /*opacité*/
	-webkit-transform: scale(1);
	transform: scale(1); /*transformation : échelle*/
}

/*---------------*/
/*** Romeo ****/
/*---------------*/

figure.effect-romeo img { /*image*/
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
	-webkit-transform: scale3d(1.4,1.4,1);
	transform: scale3d(1.4,1.4,1); /*transformation : échelle*/
}

figure.effect-romeo:hover img { /*image au survol*/
	opacity: 0.6; /*opacité*/
	-webkit-transform: scale3d(1,1,1);
	transform: translate3d(1,1,1); /*transformation : échelle*/
}

figure.effect-romeo figcaption::before,
figure.effect-romeo figcaption::after { /*figcaption pseudo-éléments créant les lignes*/
	position: absolute;
	top: 50%; /*positions*/
	left: 50%;
	width: 80%; /*largeur*/
	height: 1px; /*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(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0); /*transformation : translations*/
}

figure.effect-romeo:hover figcaption::before { /*figcaption pseudo-élément créant une ligne au survol*/
	opacity: 0.5; /*opacité*/
	-webkit-transform: translate3d(-50%,-50%,0) rotate(45deg);
	transform: translate3d(-50%,-50%,0) rotate(45deg); /*transformation : translations et rotation*/
}

figure.effect-romeo:hover figcaption::after { /*figcaption pseudo-élément créant une ligne au survol*/
	opacity: 0.5; /*opacité*/
	-webkit-transform: translate3d(-50%,-50%,0) rotate(-45deg);
	transform: translate3d(-50%,-50%,0) rotate(-45deg); /*transformation : translations et rotation*/
}

figure.effect-romeo h2,
figure.effect-romeo p { /*titre et paragraphe*/
	position: absolute;
	top: 50%; /*positions*/
	left: 10%;
	width: 80%; /*largeur*/
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s; /*temps de transition*/
}

figure.effect-romeo h2 { /*titre*/
	-webkit-transform: translate3d(0,-180%,0);
	transform: translate3d(0,-180%,0); /*transformation : translationV*/
}

figure.effect-romeo p { /*paragraphe*/
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0); /*transformation : translationV*/
}

figure.effect-romeo:hover h2 { /*titre au survol*/
	-webkit-transform: translate3d(0,-130%,0);
	transform: translate3d(0,-130%,0); /*transformation : translationV*/
}

figure.effect-romeo:hover p { /*paragraphe au survol*/
	-webkit-transform: translate3d(0,50%,0);
	transform: translate3d(0,50%,0); /*transformation : translationV*/
}

Effets ROXY - RUBY - SADIE


/*---------------*/
/**** Roxy *****/
/*---------------*/

figure.effect-roxy {
	background: -webkit-linear-gradient(45deg, #ff89e9 0%, #05abe0 100%);
	background: linear-gradient(45deg, #ff89e9 0%,#05abe0 100%); /*couleur fond*/
}

figure.effect-roxy img { /*image*/
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
	-webkit-transform: scale(1.3) translate3d(-3rem,0, 0);
	transform: scale(1.3) translate3d(-3rem,0,0); /*transformation : échelle et translationH*/
}

figure.effect-roxy figcaption::before { /*figcaption pseudo-élément pour dessiner le cadre*/
	position: absolute;
	top: 1rem; /*positions*/
	right: 1rem;
	bottom: 1rem;
	left: 1rem;
	border: 1px solid #fff; /*largeur, type et couleur de 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(-3rem,0,0);
	transform: translate3d(-3rem,0,0); /*transformation : translationH*/
}

figure.effect-roxy figcaption {
	text-align: left; /*alignement*/
}

figure.effect-roxy h2 { /*titre*/
	padding: 4rem 0 1rem 3rem; /*marges intérieures*/
}

figure.effect-roxy p { /*paragraphe*/
	padding:0 3rem; /*marges intérieures*/
	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(-1rem,0,0);
	transform: translate3d(-1rem,0,0); /*transformation : translationH*/
}

figure.effect-roxy:hover img { /*image au survol*/
	opacity: 0.7; /*opacité*/
	-webkit-transform: scale(1.3) translate3d(3rem,0, 0);
	transform: scale(1.3) translate3d(3rem,0,0); /*transformation : échelle et translationH*/
}

figure.effect-roxy:hover figcaption::before,
figure.effect-roxy:hover p { /*figcaption pseudo-élément et paragraphe au survol*/
	opacity: 1; /*opacité*/
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0); /*transformation : translation0*/
}

/*---------------*/
/**** Ruby *****/
/*---------------*/

figure.effect-ruby {
	background-color: #17819c; /*couleur de fond*/
}

figure.effect-ruby img { /*image*/
	opacity: 0.8; /*opacité*/
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
	-webkit-transform: scale(1.15);
	transform: scale(1.15); /*transformation : échelle*/
}

figure.effect-ruby:hover img { /*image*/
	opacity: 0.5; /*opacité*/
	-webkit-transform: scale(1);
	transform: scale(1); /*transformation : échelle*/
}

figure.effect-ruby h2 { /*titre*/
	margin-top: 25%; /*marge extérieure haute*/
	-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-ruby p { /*paragraphe*/
	margin: .5rem 2rem; /*marges extérieures*/
	padding: 2rem 3rem; /*marges intérieures*/
	border: 1px solid #fff; /*épaisseur nature et couleur bordure*/
	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,2rem,0) scale(1.1);
	transform: translate3d(0,2rem,0) scale(1.1); /*transformation : translationV et échelle*/
}

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

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

/*---------------*/
/**** Sadie ****/
/*---------------*/

figure.effect-sadie figcaption::before { /*figcaption pseudo-élément créant le voile dégradé*/
	position: absolute;
	top: 0; /*positions*/
	left: 0;
	width: 100%; /*largeur*/
	height: 100%; /*hauteur*/
	background: -webkit-linear-gradient(top, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
	background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%); /*couleur fond*/
	content: ''; /*NE PAS SUPPRIMER*/
	opacity: 0; /*opacité*/
	-webkit-transform: translate3d(0,50%,0);
	transform: translate3d(0,50%,0); /*transformation : translationV*/
}

figure.effect-sadie h2 { /*titre*/
	position: absolute;
	top: 50%; /*positions*/
	left: 0;
	width: 100%; /*largeur*/
	color: #484c61; /*couleur*/
	-webkit-transition: -webkit-transform 0.35s, color 0.35s;
	transition: transform 0.35s, color 0.35s; /*temps de transition*/
	-webkit-transform: translate3d(0,-50%,0);
	transform: translate3d(0,-50%,0); /*transformation : translationV*/
}

figure.effect-sadie figcaption::before,
figure.effect-sadie p { /*figcaption pseudo-élément et paragraphe*/
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
}

figure.effect-sadie p { /*paragraphe*/
	position: absolute;
	bottom: 0; /*positions*/
	left: 0;
	width: 90%; /*largeur*/
	padding: 1rem; /*marges intérieures*/
	text-align:right; /*alignement*/
	opacity: 0; /*opacité*/
	-webkit-transform: translate3d(0,1rem,0);
	transform: translate3d(0,1rem,0); /*transformation : translationV*/
}

figure.effect-sadie:hover h2 { /*titre au survol*/
	color: #fff; /*couleur*/
	-webkit-transform: translate3d(0,-4rem,0);
	transform: translate3d(0,-4rem,0); /*transformation : translationV*/
}

figure.effect-sadie:hover figcaption::before ,
figure.effect-sadie:hover p { /*figcaption pseudo-élément et paragraphe au survol*/
	opacity: 1; /*opacité*/
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0); /*transformation : translation0*/
}

Effets SARAH - SELENA - STEVE


/*---------------*/
/**** Sarah ****/
/*---------------*/

figure.effect-sarah {
	background: #42b078; /*couleur de fond*/
}

figure.effect-sarah img { /*image*/
	opacity :1; /*opacité*/
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
	-webkit-transform: translate3d(-2rem,0,0) scale(1.15);
	transform: translate3d(-2rem,0,0) scale(1.15); /*transformation : translationH et échelle*/
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure.effect-sarah:hover img { /*image au survol*/
	opacity: 0.9; /*opacité*/
	-webkit-transform: translate3d(0,0,0) scale(1.15);
	transform: translate3d(0,0,0) scale(1.15); /*transformation : translation0 et échelle*/
}

figure.effect-sarah figcaption {
	text-align: left; /*alignement*/
}

figure.effect-sarah h2 { /*titre*/
	position: relative;
	overflow: hidden;
	margin:1rem; /*marges extérieures*/
	padding:1rem 0; /*marges intérieures*/
}

figure.effect-sarah h2::after { /*pseudo-élément après le titre qui dessine la ligne*/
	position: absolute;
	bottom: 0; /*positions*/
	left: 0;
	width: 100%; /*largeur*/
	height: .3rem; /*hauteur*/
	background: #fff; /*couleur*/
	content: ''; /*NE PAS SUPPRIMER*/
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s; /*temps de transition*/
	-webkit-transform: translate3d(-100%,0,0);
	transform: translate3d(-100%,0,0); /*transformation : translationH*/
}

figure.effect-sarah:hover h2::after { /*pseudo-élément après le titre au survol*/
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0); /*transformation : translation0*/
}

figure.effect-sarah p { /*paragraphe*/
	padding: 2rem; /*marges intérieures*/
	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(100%,0,0);
	transform: translate3d(100%,0,0); /*transformation : translationH*/
}

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

/*-----------------*/
/**** Selena *****/
/*-----------------*/

figure.effect-selena {
	background: #838383; /*couleur fond*/
}

figure.effect-selena img { /*image*/
	opacity: 1; /*opacité*/
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s; /*temps de transition*/
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

figure.effect-selena:hover img { /*image au survol*/
	-webkit-transform: scale3d(0.95,0.95,1);
	transform: scale3d(0.95,0.95,1); /*transformation : échelle*/
}

figure.effect-selena h2 { /*titre*/
	margin-top: 2rem; /*marge extérieure haute*/
	-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-selena:hover h2 { /*titre au survol*/
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0); /*transformation : translation0*/
}

figure.effect-selena p { /*paragraphe*/
	padding: 0 2.5rem; /*marges intérieures*/
	opacity: 0; /*opacité*/
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
	-webkit-transform: scale(0);
	transform: scale(0); /*transformation : échelle*/
}

figure.effect-selena:hover p { /*paragraphe au survol*/
	opacity: 1; /*opacité*/
	-webkit-transform: scale(1);
	transform: scale(1); /*transformation : échelle*/
}

/*-----------------*/
/***** Steve *****/
/*-----------------*/

figure.effect-steve img { /*image*/
	opacity: 1; /*opacité*/
}

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

figure.effect-steve h2,
figure.effect-steve p { /*titre et paragraphe*/
	background: #fff; /*couleur de fond*/
	color: #2d434e; /*couleur*/
	position: relative;
	margin-top: 1.5rem; /*marges extérieures*/
	margin-left: 2rem;
	margin-right: 2rem;	
	padding: 0.5rem; /*marges intérieures*/
}

figure.effect-steve h2 { /*titre*/
	box-shadow: 0 0.1rem 1rem rgba(0,0,0,0.5); /*ombre portée*/
}

figure.effect-steve:hover h2 { /*titre au survol*/
	box-shadow: none; /*ombre portée*/
}

figure.effect-steve p { /*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: scale3d(0.9,0.9,1);
	transform: scale3d(0.9,0.9,1); /*transformation : échelle*/
}

figure.effect-steve:hover p { /*paragraphe au survol*/
	opacity: 1; /*opacité*/
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1); /*transformation : échelle*/
}

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


<div class="grid">
<figure class="effect-marley"><img alt="13-marley" src="images/tutoriels/HoverEffectImg/13-marley.jpg" />
<figcaption>
<div>
<h2>Effect <span>Marley</span></h2>
<p>Voici un paragraphe qui peut contenir un lien... etc...</p>
</div>
</figcaption>
</figure>

<figure class="effect-milo"><img alt="14-milo" src="images/tutoriels/HoverEffectImg/14-milo.jpg" />
<figcaption>
<div>
<h2>Effect <span>Milo</span></h2>
<p>Voici un paragraphe qui peut contenir un lien... etc...</p>
</div>
</figcaption>
</figure>

<figure class="effect-ming"><img alt="15-ming" src="images/tutoriels/HoverEffectImg/15-ming.jpg" />
<figcaption>
<div>
<h2>Effect <span>Ming</span></h2>
<p>Voici un paragraphe qui peut contenir un lien... etc...</p>
</div>
</figcaption>
</figure>

<figure class="effect-moses"><img alt="16-moses" src="images/tutoriels/HoverEffectImg/16-moses.jpg" />
<figcaption>
<div>
<h2>Effect <span>Moses</span></h2>
<p>Voici un paragraphe qui peut contenir un lien... etc...</p>
</div>
</figcaption>
</figure>

<figure class="effect-oscar"><img alt="17-oscar" src="images/tutoriels/HoverEffectImg/17-oscar.jpg" />
<figcaption>
<div>
<h2>Effect <span>Oscar</span></h2>
<p>Voici un paragraphe qui peut contenir un lien... etc...</p>
</div>
</figcaption>
</figure>

<figure class="effect-romeo"><img alt="18-romeo" src="images/tutoriels/HoverEffectImg/18-romeo.jpg" />
<figcaption>
<div>
<h2>Effect <span>Romeo</span></h2>
<p>Voici un paragraphe qui peut contenir un lien... etc...</p>
</div>
</figcaption>
</figure>

<figure class="effect-roxy"><img alt="19-roxy" src="images/tutoriels/HoverEffectImg/19-roxy.jpg" />
<figcaption>
<div>
<h2>Effect <span>Roxy</span></h2>
<p>Voici un paragraphe qui peut contenir un lien... etc...</p>
</div>
</figcaption>
</figure>

<figure class="effect-ruby"><img alt="20-ruby" src="images/tutoriels/HoverEffectImg/20-ruby.jpg" />
<figcaption>
<div>
<h2>Effect <span>Ruby</span></h2>
<p>Voici un paragraphe qui peut contenir un lien... etc...</p>
</div>
</figcaption>
</figure>

<figure class="effect-sadie"><img alt="21-sadie" src="images/tutoriels/HoverEffectImg/21-sadie.jpg" />
<figcaption>
<div>
<h2>Effect <span>Sadie</span></h2>
<p>Voici un paragraphe qui peut contenir un lien... etc...</p>
</div>
</figcaption>
</figure>

<figure class="effect-sarah"><img alt="22-sarah" src="images/tutoriels/HoverEffectImg/22-sarah.jpg" />
<figcaption>
<div>
<h2>Effect <span>Sarah</span></h2>
<p>Voici un paragraphe qui peut contenir un lien... etc...</p>
</div>
</figcaption>
</figure>

<figure class="effect-selena"><img alt="23-selena" src="images/tutoriels/HoverEffectImg/23-selena.jpg" />
<figcaption>
<div>
<h2>Effect <span>Selena</span></h2>
<p>Voici un paragraphe qui peut contenir un lien... etc...</p>
</div>
</figcaption>
</figure>

<figure class="effect-steve"><img alt="24-steve" src="images/tutoriels/HoverEffectImg/24-steve.jpg" />
<figcaption>
<div>
<h2>Effect <span>Steve</span></h2>
<p>Voici un paragraphe qui peut contenir un lien... etc...</p>
</div>
</figcaption>
</figure>
</div><!-- fin grid -->

Dans le code du corps de la page ou de la boîte (onglet 5) 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.

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-2

→ Des images avec Hover Effects Ideas -2

Effect Marley

Effect Milo

Effect Ming

Effect Moses

Effect Oscar

Effect Romeo

Effect Roxy

Effect Ruby

Effect Sadie

Effect Sarah

Effect Selena