Images avec Hover Effects Ideas-1

Des images avec Hover Effects Ideas

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 aurait été 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... )

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 à une police d'icônes.

Le dossier contenant toutes les images de ce tutoriel et la police d'icônes est téléchargeable ici.

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 : Style commun est obligatoire, soit au début du code source de l'article ou de la boite libre, soit dans styleplus.css.
Ensuite, ajouter au même endroit les codes correspondant aux effets souhaités, en adaptant à l'aide des quelques commentaires.
ATTENTION, si le style n'est pas dans styleplus.css, il faut placer les balises <style type="text/css"> au début du code source et </style> à la fin du style.
Puis dans le code source du corps de l'article ou de la boite libre, là où vous souhaitez placer les images, insérez le code correspondant à chaque effet en adaptant les contenus, bien sûr.

Style commun

/* Common style */
.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*/
   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*/
}

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

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

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

Effects 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*/
}

Effects 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*/
}

Effects 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*/
}

Effects 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*/
}

Codes du corps de l'article

<div class="grid">
   <figure class="effect-apollo"><img alt="01-apollo" src="img/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="img/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="img/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="img/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="img/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="img/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="img/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="img/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="img/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="img/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="img/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="img/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>

Dans les codes du corps de l'article ci-dessus, le code est assez simple (voir cependant l'Effect 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>.

Les parties surlignées en blanc sont à adapter évidemment à vos besoins. Toutes les images sont dans un dossier HoverEffectImg placé dans le dossier img à la racine de GuppY. Il faut évidemment adapter les sources à votre configuration. Il est très simple d'inclure dans les titres ou les paragraphes : des images, des liens directement dans l'éditeur de GuppY en se servant des outils habituels.

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.

ATTENTION : 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.

Date de création : 18/11/2018 @ 09:22
Catégorie : - Changements au survol
Page lue 94227 fois

Bienvenue !

Et les navigateurs ?

Skins série "Transparences" présentées avec Camera !

Camera : slider développé par Manuel Masia

À quoi servent ces iFrames ?

Des bandeaux avec des cellules (tuiles) indépendantes

Trois AudioPlayers

Quelques exemples d'effets obtenus au survol

... et bien d'autres encore, suivez ces liens...

Astuces en pur CSS

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

Effect Lily

Style commun

Effects Apollo Bubba Chico

Effects Dexter Duke Goliath

Effects Honey Jazz Julia

Effects Layla Lexi Lily

Codes du corps de l'article

Préférences

Lettre d'information

Webmaster - Infos