adHoc.71site.fr Animations au survol

Animations au survol - Images avec Hover Effects Ideas-1

→ Des images avec Hover Effects Ideas -1

Les 30 propositions de ces trois pages sont de Mary Lou, on peut les trouver sur ce site.

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

Les images présentées sont libres de droits et issues de ce site : https://unsplash.com/

J'ai essayé de me rapprocher le plus fidèlement possible de ces propositions en adaptant et simplifiant quelquefois le code. Ces propositions ne sont pas vraiment "responsives" car, si l'image s'adapte bien, pour la police, ici, il n'y a pas de solution miracle. La plupart du temps, l'unité utilisée est rem. Il faudrait éventuellement modifier la taille de la police pour l'affichage sur smartphone (me joindre si c'est votre souhait). Il aurait été également possible d'utiliser une unité proportionnelle vw à la largeur de l'affichage de la page : Information trouvée ici. Mais sur un écran de smartphone, cela ne convient plus...

Une solution bien pratique est possible dans des Iframes responsives. Voir ici...

La première série montre 12 effets, classés par ordre alphabétique. La seconde série les 12 effets suivants et la troisième série, 6 effets supplémentaires faisant appel en plus à une police d'icônes (Font Awesome : https://fontawesome.com/ ).

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

01-apollo — Effect Apollo

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

02-bubba — Effect Bubba

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

03-chico — Effect Chico

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

04-dexter — Effect Dexter

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

05-duke — Effect Duke

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

06-goliath — Effect Goliath

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

07-honey — Effect Honey

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

08-jazz — Effect Jazz

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

09-julia — Effect Julia

Voici 3 paragraphes

avec une arrivée

progressive

10-layla — Effect Layla

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

11-lexi — Effect Lexi

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

12-lily — Effect Lily

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. Ensuite, ajouter au même endroit les codes de style correspondant aux effets souhaités :
onglet 1 : effets APOLLO - BUBBA - CHICO
onglet 2 : effets DEXTER - DUKE - GOLIATH
onglet 3 : effets HONEY - JAZZ - JULIA
onglet 4 : effets LAYLA - LEXI - LILY
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 APOLLO - BUBBA - CHICO


/*-----------------*/
/***** Apollo *****/
/*-----------------*/

figure.effect-apollo {
	background: #3498db; /*couleur fond*/
}

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

figure.effect-apollo figcaption::before { /*pseudo-élément pour produire le "voile" incliné*/
	position: absolute;
	top: 0; /*positions*/
	left: 0;
	width: 100%; /*largeur*/
	height: 100%; /*hauteur*/
	background: rgba(255,255,255,0.5); /*couleur fond et opacité*/
	content: ''; /*NE PAS SUPPRIMER*/
	-webkit-transition: -webkit-transform 0.6s;
	transition: transform 0.6s; /*temps de transition*/
	-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
	transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0); /*transformation : échelle rotation et translationV*/
}

figure.effect-apollo p { /*pagagraphe*/
	position: absolute;
	right: 0; /*positions*/
	bottom: 0;
	margin: 2rem; /*marges extérieures*/
	padding: 0 1rem; /*marges intérieures*/
	max-width: 60%; /*largeur maxi*/
	border-right: .2rem solid #fff; /*épaisseur nature et couleur bordure droite*/
	text-align: right; /*alignement*/
	opacity: 0; /*opacité*/
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s; /*temps de transition*/
}

figure.effect-apollo h2 { /*titre*/
	position: absolute;
	left: 2rem; /*positions*/
	top: 3rem;
	text-align: left; /*alignement*/
	color: #8080C0; /*couleur*/
}
figure.effect-apollo:hover h2 { /*titre au survol*/
	color: #fff; /*couleur*/
}

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

figure.effect-apollo:hover figcaption::before { /*pseudo-élément pour produire le "voile" incliné au survol*/
	-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
	transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0); /*transformation : échelle rotation et translationV*/
}

figure.effect-apollo:hover p { /*paragraphe au survol*/
	opacity: 1; /*opacité*/
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s; /*délai de transition*/
}

/*---------------*/
/*** Bubba ****/
/*---------------*/

figure.effect-bubba {
	background: #9e5406; /*couleur fond*/
}

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

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

figure.effect-bubba figcaption::before,
figure.effect-bubba figcaption::after { /*figcaption : pseudo-élément pour dessiner le cadre*/
	position: absolute;
	top: 2rem; /*positions*/
	right: 2rem;
	bottom: 2rem;
	left: 2rem;
	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*/
}

figure.effect-bubba figcaption::before { /*figcaption : pseudo-élément pour dessiner le cadre*/
	border-top: 1px solid #fff; /*largeur, type et couleur de bordure haute*/
	border-bottom: 1px solid #fff; /*largeur, type et couleur de bordure basse*/
	-webkit-transform: scale(0,1);
	transform: scale(0,1); /*transformation : échelle*/
}

figure.effect-bubba figcaption::after { /*figcaption : pseudo-élément pour dessiner le cadre*/
	border-right: 1px solid #fff; /*largeur, type et couleur de bordure droite*/
	border-left: 1px solid #fff; /*largeur, type et couleur de bordure gauche*/
	-webkit-transform: scale(1,0);
	transform: scale(1,0); /*transformation : échelle*/
}

figure.effect-bubba h2 { /*titre*/
	padding-top: 8rem; /*marge inté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-bubba p { /*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: translate3d(0,2rem,0);
	transform: translate3d(0,2rem,0); /*transformation : translationV*/
}

figure.effect-bubba:hover figcaption::before,
figure.effect-bubba:hover figcaption::after { /*figcaption : pseudo-élément pour dessiner le cadre au survol*/
	opacity: 1; /*opacité*/
	-webkit-transform: scale(1);
	transform: scale(1); /*transformation : échelle*/
}

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

/*---------------*/
/**** Chico ****/
/*---------------*/

figure.effect-chico 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.2);
	transform: scale(1.2); /*transformation : échelle*/
}

figure.effect-chico:hover img { /*image au survol*/
	opacity: 0.6; /*opacité*/
	-webkit-transform: scale(1.05);
	transform: scale(1.05); /*transformation : échelle*/
}

figure.effect-chico figcaption::before { /*figcaption : pseudo-élément pour dessiner le cadre*/
	position: absolute;
	top: 1.5rem; /*positions*/
	right: 1.5rem;
	bottom: 1.5rem;
	left: 1.5rem;
	border: 1px solid #fff; /*épaisseur nature et couleur de la bordure*/
	content: ''; /*NE PAS SUPPRIMER*/
	-webkit-transform: scale(1.1);
	transform: scale(1.1); /*transformation : échelle*/
}

figure.effect-chico figcaption::before,
figure.effect-chico p { /*figcaption : pseudo-élément pour dessiner le cadre 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-chico h2 { /*titre*/
	padding: 20% 0 2rem 0; /*marges intérieures*/
}

figure.effect-chico p { /*paragraphe*/
	margin: 0 auto; /*marges extérieures*/
	padding: 0 2.5rem; /*marges intérieures*/
	-webkit-transform: scale(1.5);
	transform: scale(1.5); /*transformation : échelle*/
}

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

Effets DEXTER - DUKE - GOLIATH


/*---------------*/
/*** Dexter ****/
/*---------------*/

figure.effect-dexter {
	background: -webkit-linear-gradient(top, rgba(37,141,200,1) 0%, rgba(104,60,19,1) 100%);
	background: linear-gradient(to bottom, rgba(37,141,200,1) 0%,rgba(104,60,19,1) 100%); /*couleur fond*/
}

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

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

figure.effect-dexter figcaption::after { /*figcaption : pseudo-élément pour dessiner le cadre*/
	position: absolute;
	right: 1rem; /*positions*/
	bottom: 3rem;
	left: 1rem;
	height: -webkit-calc(50% - 2.5rem);
	height: calc(50% - 2.5rem); /*hauteur*/
	border: .2rem solid #fff; /*épaisseur nature et couleur de la bordure*/
	content: ''; /*NE PAS SUPPRIMER*/
	-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-dexter:hover figcaption::after { /*figcaption : pseudo-élément pour dessiner le cadre au survol*/
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0); /*transformation : translation0*/
}

figure.effect-dexter figcaption {
	text-align: left;
}

figure.effect-dexter h2 { /*titre*/
	position: absolute;
	left: 3rem; /*positions*/
	top: 4rem;
}

figure.effect-dexter p { /*paragraphe*/
	position: absolute;
	right: 3rem; /*positions*/
	bottom: 6rem;
	left: 3rem;
	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,-10rem,0);
	transform: translate3d(0,-10rem,0); /*transformation : translationV*/
}

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

/*---------------*/
/**** Duke *****/
/*---------------*/

figure.effect-duke {
	background: -webkit-linear-gradient(-45deg, #34495e 0%,#cc6055 100%);
	background: linear-gradient(-45deg, #34495e 0%,#cc6055 100%); /*couleur fond*/
}

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

figure.effect-duke:hover img { /*image*/
	opacity: 0.4; /*opacité*/
	-webkit-transform: scale3d(2,2,1);
	transform: scale3d(2,2,1); /*transformation : échelle*/
}

figure.effect-duke h2 { /*titre*/
	position: absolute;
	top:2rem; /*positions*/
	left:3rem;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s; /*temps de transition*/
	-webkit-transform: scale3d(0.8,0.8,1);
	transform: scale3d(0.8,0.8,1); /*transformation : échelle*/
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
}

figure.effect-duke p { /*paragraphe*/
	position: absolute;
	bottom: 0; /*positions*/
	left: 0;
	margin: 2rem; /*marges extérieures*/
	padding:3rem 1.5rem; /*marges intérieures*/
	border: .2rem solid #fff; /*épaisseur nature et couleur bordure*/
	opacity: 0; /*opacité*/
	-webkit-transform: scale3d(0.8,0.8,1);
	transform: scale3d(0.8,0.8,1); /*transformation : échelle*/
	-webkit-transform-origin: 50% -100%;
	transform-origin: 50% -100%;
}

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

/*-----------------*/
/**** Goliath *****/
/*-----------------*/

figure.effect-goliath {
	background: #df4e4e; /*couleur fond*/
}

figure.effect-goliath img,
figure.effect-goliath h2 { /*image et titre*/
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s; /*temps de transition*/
}

figure.effect-goliath img { /*image*/
	-webkit-transform: scale(1.01);
	transform: scale3d(1.01); /*transformation : échelle*/
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure.effect-goliath h2,
figure.effect-goliath p { /*titre et paragraphe*/
	position: absolute;
	bottom: 0; /*positions*/
	left: 0;
}

figure.effect-goliath h2 { /*titre*/
	padding: 2rem; /*marges intérieures*/
}

figure.effect-goliath p { /*paragraphe*/
	padding: 1rem; /*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(0,4.5rem,0);
	transform: translate3d(0,4.5rem,0); /*transformation : translationV*/
}

figure.effect-goliath:hover img { /*image au survol*/
	-webkit-transform: translate3d(0,-4.5rem,0) scale(1.01);
	transform: translate3d(0,-4.5rem,0) scale(1.01); /*transformation : translationV et échelle*/
}

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

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

Effets HONEY - JAZZ - JULIA


/*---------------*/
/*** Honey ****/
/*---------------*/

figure.effect-honey {
	background: #4a3753; /*couleur de fond*/
}

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

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

figure.effect-honey figcaption::before { /*figcaption pseudo-élément pour dessiner la ligne basse*/
	position: absolute;
	bottom: 0; /*positions*/
	left: 0;
	width: 100%; /*largeur*/
	height: 1.5rem; /*hauteur*/
	background: #000; /*couleur de fond*/
	content: ''; /*NE PAS SUPPRIMER*/
	-webkit-transform: translate3d(0,1.5rem,0);
	transform: translate3d(0,1.5rem,0); /*transformation : translationV*/
}

figure.effect-honey h2 { /*titre*/
	position: absolute;
	bottom: 5rem; /*positions*/
	left: 0;
	padding:1.5rem; /*marges intérieures*/
	width: 100%; /*largeur*/
	text-align: left; /*alignement*/
	-webkit-transform: translate3d(0,-3rem,0);
	transform: translate3d(0,-3rem,0); /*transformation : translationV*/
}

figure.effect-honey p { /*paragraphe*/
	position: absolute;
	bottom: 3rem; /*positions*/
	left: 0;
	padding:0 2rem; /*marges intérieures*/
	text-align: left; /*alignement*/
	opacity: 0; /*opacité*/
	-webkit-transition: opacity 2s, -webkit-transform 0.35s;
	transition: opacity 2s, transform 0.35s; /*temps de transition*/
	-webkit-transform: translate3d(0,-3rem,0);
	transform: translate3d(0,-3rem,0); /*transformation : translationV*/
}

figure.effect-honey figcaption::before,
figure.effect-honey h2 { /*figcaption pseudo-élément pour dessiner la ligne basse et titre*/
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s; /*temps de transition*/
}

figure.effect-honey:hover figcaption::before,
figure.effect-honey:hover h2,
figure.effect-honey:hover p { /*figcaption pseudo-élément pour dessiner la ligne basse, titre et paragraphe au survol*/
	opacity: 1; /*opacité*/
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0); /*transformation : translation0*/
}

/*---------------*/
/***** Jazz *****/
/*---------------*/

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

figure.effect-jazz img { /*image*/
	opacity: 0.9; /*opacité*/
}

figure.effect-jazz figcaption::after,
figure.effect-jazz img,
figure.effect-jazz p { /*figcaption, image et paragraphe*/
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
}

figure.effect-jazz figcaption::after { /*figcaption pseudo-élément pour dessiner les 2 lignes*/
	position: absolute;
	top: 0; /*positions*/
	left: 0;
	width: 100%; /*largeur*/
	height: 100%; /*hauteur*/
	border-top: .2rem solid #fff; /*épaisseur nature et couleur bordure haute*/
	border-bottom: .2rem solid #fff; /*épaisseur nature et couleur bordure basse*/
	content: ''; /*NE PAS SUPPRIMER*/
	opacity: 0; /*opacité*/
	-webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
	transform: rotate3d(0,0,1,45deg) scale3d(1,0,1); /*transformation : rotation et échelle*/
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

figure.effect-jazz h2,
figure.effect-jazz p { /*titre et paragraphe*/
	-webkit-transform: scale3d(0.8,0.8,1);
	transform: scale3d(0.8,0.8,1); /*transformation : échelle*/
}

figure.effect-jazz h2 { /*titre*/
	padding-top: 26%; /*marge intérieure haute*/
	opacity: 1; /*opacité*/
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s; /*temps de transition*/
}

figure.effect-jazz p { /*paragraphe*/
	padding: .5rem 2rem; /*marges intérieures*/
	opacity: 0; /*opacité*/
}

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

figure.effect-jazz:hover figcaption::after { /*figcaption pseudo-élément dessinant les 2 lignes au survol*/
	opacity: 1; /*opacité*/
	-webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
	transform: rotate3d(0,0,1,45deg) scale3d(1,1,1); /*transformation : rotation et échelle*/
}

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

/*---------------*/
/***** Julia *****/
/*---------------*/

figure.effect-julia {
	background: #2f3238; /*couleur fond*/
}

figure.effect-julia img { /*image*/
	-webkit-transform: scale(1.01);
	transform: scale3d(1.01); /*transformation : échelle*/
	-webkit-transition: opacity 1s, -webkit-transform 1s;
	transition: opacity 1s, transform 1s; /*temps de transition*/
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure.effect-julia:hover img { /*image au survol*/
	opacity: 0.6; /*opacité*/
	-webkit-transform: scale(1.1);
	transform: scale3d(1.1); /*transformation : échelle*/
}

figure.effect-julia figcaption {
	text-align: left;
}

figure.effect-julia h2 { /*titre*/
	position: relative;
	padding: 1rem; /*marges intérieures*/
}

figure.effect-julia p { /*paragraphe*/
	display: inline-block;
	margin: .5rem 5rem .5rem 2rem; /*marges extérieures*/
	padding: .4rem .8rem; /*marges intérieures*/
	background: rgba(255,255,255,0.9); /*couleur fond et opacité*/
	color: #2f3238; /*couleur*/
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
	-webkit-transform: translate3d(-36rem,0,0);
	transform: translate3d(-36rem,0,0); /*transformation : translationH*/
}

figure.effect-julia p:nth-of-type(1) { /*1er paragraphe*/
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s; /*delai de transition*/
}

figure.effect-julia p:nth-of-type(2) { /*2nd paragraphe*/
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s; /*delai de transition*/
}

figure.effect-julia p:nth-of-type(3) { /*3me paragraphe*/
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s; /*delai de transition*/
}

figure.effect-julia:hover p:nth-of-type(1) { /*1er paragraphe au survol*/
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s; /*delai de transition*/
}

figure.effect-julia:hover p:nth-of-type(2) { /*2nd paragraphe au survol*/
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s; /*delai de transition*/
}

figure.effect-julia:hover p:nth-of-type(3) { /*3me paragraphe au survol*/
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s; /*delai de transition*/
}

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

Effets LAYLA - LEXI - LILY


/*---------------*/
/**** Layla *****/
/*---------------*/

figure.effect-layla {
	background: #18a367; /*couleur fond*/
}

figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after { /*figcaption pseudo élément pour dessiner le cadre*/
	position: absolute;
	content: ''; /*NE PAS SUPPRIMER*/
	opacity: 0; /*opacité*/
}

figure.effect-layla figcaption::before { /*figcaption pseudo élément pour dessiner le cadre*/
	top: 2rem; /*positions*/
	right: 1.5rem;
	bottom: 2rem;
	left: 1.5rem;
	border-top: 1px solid #fff; /*largeur, type et couleur de bordure haute*/
	border-bottom: 1px solid #fff; /*largeur, type et couleur de bordure basse*/
	-webkit-transform: scale(0,1);
	transform: scale(0,1); /*transformation : échelle*/
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
}

figure.effect-layla figcaption::after { /*figcaption pseudo élément pour dessiner le cadre*/
	top: 1.5rem; /*positions*/
	right: 2rem;
	bottom: 1.5rem;
	left: 2rem;
	border-right: 1px solid #fff; /*largeur, type et couleur de bordure droite*/
	border-left: 1px solid #fff; /*largeur, type et couleur de bordure gauche*/
	-webkit-transform: scale(1,0);
	transform: scale(1,0); /*transformation : échelle*/
	-webkit-transform-origin: 100% 0;
	transform-origin: 100% 0;
}

figure.effect-layla h2 { /*titre*/
	padding-top: 20%; /*marge inté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-layla p { /*paragraphe*/
	padding: 1rem 4rem; /*marges intérieures*/
	opacity: 0; /*opacité*/
	-webkit-transform: translate3d(0,-1rem,0);
	transform: translate3d(0,-1rem,0); /*transformation : translationV*/
}

figure.effect-layla img,
figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after,
figure.effect-layla p {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
}

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

figure.effect-layla:hover figcaption::before,
figure.effect-layla:hover figcaption::after { /*figcaption pseudo élément pour dessiner le cadre au survol*/
	opacity: 1; /*opacité*/
	-webkit-transform: scale(1);
	transform: scale(1); /*transformation : échelle*/
}

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

figure.effect-layla:hover figcaption::after,
figure.effect-layla:hover h2,
figure.effect-layla:hover p,
figure.effect-layla:hover img {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s; /*délai de transition au survol*/
}

/*---------------*/
/***** Lexi *****/
/*---------------*/

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

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

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

figure.effect-lexi figcaption::before { /*figcaption : pseudo-élément crée le cadre circulaire*/
	position: absolute;
	right: -6rem; /*positions*/
	bottom: -6rem;
	width: 20rem; /*largeur*/
	height: 20rem; /*hauteur*/
	border: .2rem solid #fff; /*épaisseur nature et couleur bordure*/
	border-radius: 50%; /*arrondi*/
	box-shadow: 0 0 0 40rem rgba(255,255,255,0.2); /*ombre portée*/
	content: ''; /*NE PAS SUPPRIMER*/
	opacity: 0; /*opacité*/
	-webkit-transform: scale3d(0.5,0.5,1);
	transform: scale3d(0.5,0.5,1); /*transformation : échelle*/
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

figure.effect-lexi:hover img { /*image au survol*/
	opacity: 0.6; /*opacité*/
	-webkit-transform: translate3d(0,0,0) scale(1.05);
	transform: translate3d(0,0,0) scale(1.05); /*transformation : translation et échelle*/
}

figure.effect-lexi h2 { /*titre*/
	position: absolute;
	top:2rem; /*positions*/
	left:2rem;
	color: #484c61; /*couleur*/
	text-align: left; /*alignement*/
	-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-lexi p { /*paragraphe*/
	position: absolute;
	right: .5rem; /*positions*/
	bottom: .5rem;
	padding: 0 1rem 1rem 0; /*marges intérieures*/
	width: 10rem; /*largeur*/
	text-align: right; /*alignement*/
	opacity: 0; /*opacité*/
	-webkit-transform: translate3d(2rem,2rem,0);
	transform: translate3d(2rem,2rem,0); /*transformation : translationsHV*/
}

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

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

/*---------------*/
/***** Lily ******/
/*---------------*/

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

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

figure.effect-lily figcaption > div { /*figcaption*/
	position: absolute;
	bottom: 0; /*positions*/
	left: 0;
	width: 100%; /*largeur*/
	height: 70%; /*hauteur*/
}

figure.effect-lily h2,
figure.effect-lily p { /*titre et paragraphe*/
	-webkit-transform: translate3d(0,6rem,0);
	transform: translate3d(0,6rem,0); /*translationV*/
}

figure.effect-lily h2 { /*titre*/
	padding:0 3rem; /*marges intérieures*/
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s; /*temps de transition*/
}

figure.effect-lily p { /*paragraphe*/
	padding:0 3rem;  /*marges intérieures*/
	opacity: 0; /*opacité*/
	-webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
	transition: opacity 0.2s, transform 0.35s; /*temps de transition*/
}

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

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

figure.effect-lily:hover p { /*paragraphe au survol*/
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s; /*délai de transition*/
	-webkit-transition-duration: 0.35s;
	transition-duration: 0.35s; /*temps de transition*/
}

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


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

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

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

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

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

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

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

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

<figure class="effect-julia"><img alt="09-julia" src="images/tutoriels/HoverEffectImg/09-julia.jpg" />
<figcaption>
<div>
<h2>Effect <span>Julia</span></h2>
<p>Voici 3 paragraphes</p>
<p>avec une arrivée</p>
<p>progressive</p>
</div>
</figcaption>
</figure>

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

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

<figure class="effect-lily"><img alt="12-lily" src="images/tutoriels/HoverEffectImg/12-lily.jpg" />
<figcaption>
<div>
<h2>Effect <span>Lily</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 (voir cependant l'Effet JULIA où il y a, dans l'exemple 3 paragraphes). 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-1

→ Des images avec Hover Effects Ideas -1

Effect Apollo

Effect Bubba

Effect Chico

Effect Dexter

Effect Duke

Effect Goliath

Effect Honey

Effect Jazz

Effect Julia

Effect Layla

Effect Lexi