Images avec Hover Effects Ideas-3

Des images avec Hover Effects Ideas

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

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

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

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

30-zoe — Effect Zoe

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

Les codes utilisés sont ci-dessous.
Le contenu du premier onglet : Style commun (strictement le même qu'à la page précédente) est obligatoire, soit au début du code source de l'article ou de la boite libre, soit dans styleplus.css. Mais il faut ajouter un lien vers la police d'icônes au tout début du code source de l'article ainsi, avec un chemin à adapter à votre configuration :

<link href="img/HoverEffectImg/font-awesome-4.2.0/css/font-awesome.css" rel="stylesheet" type="text/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 Hera Kira

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Effects Phoebe Terry

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

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

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

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

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

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

Effects Winston Zoe

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Codes du corps de l'article

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

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

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

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

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

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

Pour les effets Phoebe et Winston, le code du style appelle des images vectorielles, il faut adapter les chemins à votre configuration.

Dans les codes du corps de l'article ci-dessus, le code est structuré de la même manière que la page précédente. Il faut placer toutes les parties <figure class="effect-xxxx">...</figure> dans un <div class="grid">...</div>.

Cependant, il y a les appels aux icônes... Là c'est un peu délicat car cet appel est dans une classe

<i class="fa fa-fw fa-download"></i> par exemple...

mais le greffon htmlpurifier de Guppy supprime manifestement ces balises, si le contenu est vide... Il faut donc "tricher" et intégrer un caractère vide au clavier ou en le copiant-collant (j'en ai trouvé 4 qui fonctionnent indifféremment : Alt+0127 Alt+0129 Alt+0141 Alt+0157)

Vous pouvez voir à quoi ils ressemblent en affichant le code source de cet article. Mais pour les besoins de ce tutoriel j'ai mis le caractère @ (n'oubliez donc pas de le remplacer par un caractère vide si vous copiez-collez mon code...)

Les parties surlignées en blanc sont à adapter évidemment à vos besoins. Toutes les images, ainsi que la police d'icônes 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:25
Catégorie : - Changements au survol
Page lue 89116 fois

Prévisualiser... Imprimer...

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

Effect Hera

Effect Kira

Effect Phoebe

Effect Terry

Effect Winston

Effect Zoe

Style commun

Effects Hera Kira

Effects Phoebe Terry

Effects Winston Zoe

Codes du corps de l'article

Réactions à cet article

Préférences

Lettre d'information

Webmaster - Infos