Images avec Hover Effects Ideas-2

Des images avec Hover Effects Ideas

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

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

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

Cette seconde série présente les 12 effets suivants classés dans l'ordre alphabétique.

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

13-marley — Effect Marley

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

14-milo — Effect Milo

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

15-ming — Effect Ming

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

16-moses — Effect Moses

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

17-oscar — Effect Oscar

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

18-romeo — Effect Romeo

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

19-roxy — Effect Roxy

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

20-ruby — Effect Ruby

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

21-sadie — Effect Sadie

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

22-sarah — Effect Sarah

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

23-selena — Effect Selena

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

24-steve — Effect Steve

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

Les codes utilisés sont ci-dessous.
Le contenu du premier onglet : 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.
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 Marley Milo Ming Moses

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

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

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

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

figure.effect-marley h2 { /*titre*/
   -webkit-transition: -webkit-transform 0.35s;
   transition: transform 0.35s; /*temps de transition*/
   -webkit-transform: translate3d(0,2rem,0);
   transform: translate3d(0,2rem,0); /*transformation : translationV*/
}

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

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

figure.effect-marley h2::after,
figure.effect-marley p { /*pseudo-élément après le titre et paragraphe*/
   opacity: 0; /*opacité*/
   -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
   transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
}

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

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

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

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

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

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

figure.effect-milo p { /*paragraphe*/
    margin-top:1rem; /*marge extérieure haute*/
   padding: 0 1rem; /*marges intérieures*/
   width: 50%; /*largeur*/
   border-right: 1px solid #fff; /*épaisseur, nature, couleur bordure droite*/
   text-align: right; /*alignement*/
   opacity: 0; /*opacité*/
   -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
   transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
   -webkit-transform: translate3d(-4rem,0,0);
   transform: translate3d(-4rem,0,0); /*transformation : translationH*/
}

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

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

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

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

figure.effect-ming figcaption::before { /*figcaption pseudo-élément créant le cadre*/
   position: absolute;
   top: 1.5rem; /*positions*/
   right: 1.5rem;
   bottom: 2rem;
   left: 1.5rem;
   border: .15rem solid #fff; /*épaisseur nature et couleur bordure*/
   box-shadow: 0 0 0 3.5rem rgba(255,255,255,0.2); /*ombre portée*/
   content: ''; /*NE PAS SUPPRIMER*/
   opacity: 0; /*opacité*/
   -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
   transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
   -webkit-transform: scale3d(1.4,1.4,1);
   transform: scale3d(1.4,1.4,1); /*transformation : échelle*/
}

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

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

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

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

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

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

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

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

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

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

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

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

figure.effect-moses p { /*paragraphe*/
   float: right;
    margin-right:5%; /*marge extérieure droite*/
   padding: .5rem; /*marges intérieures*/
    width: 45%; /*largeur*/
   height: 50%; /*hauteur*/
   text-align: right; /*alignement*/
    border: 1px solid #fff; /*épaisseur nature et couleur bordure*/
   opacity: 0; /*opacité*/
   -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
   transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
   -webkit-transform: translate3d(-50%,-50%,0);
   transform: translate3d(-50%,-50%,0); /*transformation : translationsHV*/
}

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

Effects Oscar Romeo Roxy Ruby

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

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

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

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

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

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

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

figure.effect-oscar h2 { /*titre*/
   margin: 20% 0 1rem 0; /*marges extérieures*/
   -webkit-transition: -webkit-transform 0.35s;
   transition: transform 0.35s; /*temps de transition*/
   -webkit-transform: translate3d(0,100%,0);
   transform: translate3d(0,100%,0); /*transformation : translationV*/
}

figure.effect-oscar figcaption::before,
figure.effect-oscar p { /*figcaption pseudo-élément et paragraphe*/
    padding:0 4rem; /*marges intérieures*/
   opacity: 0; /*opacité*/
   -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
   transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
   -webkit-transform: scale(0);
   transform: scale(0); /*transformation : échelle*/
}

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

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

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

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

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

figure.effect-romeo figcaption::before,
figure.effect-romeo figcaption::after { /*figcaption pseudo-éléments créant les lignes*/
   position: absolute;
   top: 50%; /*positions*/
   left: 50%;
   width: 80%; /*largeur*/
   height: 1px; /*hauteur*/
   background: #fff; /*couleur*/
   content: ''; /*NE PAS SUPPRIMER*/
   -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
   transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
   -webkit-transform: translate3d(-50%,-50%,0);
   transform: translate3d(-50%,-50%,0); /*transformation : translations*/
}

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

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

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

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

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

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

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

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

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

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

figure.effect-roxy figcaption::before { /*figcaption pseudo-élément pour dessiner le cadre*/
   position: absolute;
   top: 1rem; /*positions*/
   right: 1rem;
   bottom: 1rem;
   left: 1rem;
   border: 1px solid #fff; /*largeur, type et couleur de bordure*/
   content: ''; /*NE PAS SUPPRIMER*/
   opacity: 0; /*opacité*/
   -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
   transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
   -webkit-transform: translate3d(-3rem,0,0);
   transform: translate3d(-3rem,0,0); /*transformation : translationH*/
}

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

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

figure.effect-roxy p { /*paragraphe*/
    padding:0 3rem; /*marges intérieures*/
   opacity: 0; /*opacité*/
   -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
   transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
   -webkit-transform: translate3d(-1rem,0,0);
   transform: translate3d(-1rem,0,0); /*transformation : translationH*/
}

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

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

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

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

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

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

figure.effect-ruby h2 { /*titre*/
   margin-top: 25%; /*marge extérieure haute*/
   -webkit-transition: -webkit-transform 0.35s;
   transition: transform 0.35s; /*temps de transition*/
   -webkit-transform: translate3d(0,2rem,0);
   transform: translate3d(0,2rem,0); /*transformation : translationV*/
}

figure.effect-ruby p { /*paragraphe*/
    margin: .5rem 2rem; /*marges extérieures*/
    padding: 2rem 3rem; /*marges intérieures*/
   border: 1px solid #fff; /*épaisseur nature et couleur bordure*/
   opacity: 0; /*opacité*/
   -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
   transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
   -webkit-transform: translate3d(0,2rem,0) scale(1.1);
   transform: translate3d(0,2rem,0) scale(1.1); /*transformation : translationV et échelle*/
}

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

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

Effects Sadie Sarah Selena Steve

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

figure.effect-sarah p { /*paragraphe*/
   padding: 2rem; /*marges intérieures*/
   opacity: 0; /*opacité*/
   -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
   transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
   -webkit-transform: translate3d(100%,0,0);
   transform: translate3d(100%,0,0); /*transformation : translationH*/
}

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

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

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

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

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

figure.effect-selena h2 { /*titre*/
    margin-top: 2rem; /*marge extérieure haute*/
   -webkit-transition: -webkit-transform 0.35s;
   transition: transform 0.35s; /*temps de transition*/
   -webkit-transform: translate3d(0,2rem,0);
   transform: translate3d(0,2rem,0); /*transformation : translationV*/
}

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

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

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

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

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

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

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

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

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

figure.effect-steve p { /*paragraphe*/
   opacity: 0; /*opacité*/
   -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
   transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
   -webkit-transform: scale3d(0.9,0.9,1);
   transform: scale3d(0.9,0.9,1); /*transformation : échelle*/
}

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

Codes du corps de l'article

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

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

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

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

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

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

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

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

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

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

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

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

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

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:23
Catégorie : - Changements au survol
Page lue 84053 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-2

Effect Marley

Effect Milo

Effect Ming

Effect Moses

Effect Oscar

Effect Romeo

Effect Roxy

Effect Ruby

Effect Sadie

Effect Sarah

Effect Selena

Effect Steve

Style commun

Effects Marley Milo Ming Moses

Effects Oscar Romeo Roxy Ruby

Effects Sadie Sarah Selena Steve

Codes du corps de l'article

Préférences

Lettre d'information

Webmaster - Infos