En poursuivant votre visite de ce site, vous acceptez l'utilisation de cookies pour permettre ses différents services. Voir les Mentions légales.
 
 
  • Sur ce site, vous trouverez : Camera ! Évidemment...

    ...mais aussi des carousels : WaterwheelCarousel par exemple...

  • ... des informations sur les iFrames responsives

    Une solution élégante pour rendre les iFrames (cadres, dans lesquels on intègre d'autres pages) "responsive design" : Ils s'adapteront automatiquement et de manière proportionnelle à la dimension de la page.

    Lisez le tutoriel

    Lisez également ce tutoriel et aussi celui-là.

    pour créer un bandeau "responsive design", constitué de cellules indépendantes, au contenu varié, à placer en haut, en bas, dans la boite édito, dans un article...de votre site.

  • ...un Audio Player dans un Iframe... ...un autre, simple, intégré dans Guppy... et... JPlayer ... intégré, lui aussi.

  • ...des images qui changent au survol de la souris... ...par exemple :

    ...mais bien d'autres effets à découvrir, notamment celui que vous êtes en train d'utiliser...

  • ...et bien sûr des skins pour habiller vos sites GuppY V5...la série "Transparences" avec ici FeatureCarousel

  • Camera

    Camera

    ¤ Camera est un slider développé par Manuel Masia. On peut l'utiliser très facilement dans GuppY.

    Dans ses différentes options possibles, on peut faire varier les transitions, les apparitions de titres, les vignettes de pagination. Camera peut même intégrer des vidéos !

    Sur ce site quelques tutoriels pour mieux maitriser Camera.

    Informations Camera

    ¤ Deux carousels de Brian Osborne sont disponibles lisez les tutoriels dédiés : WaterwheelCarousel et FeatureCarousel.

  • iFrames

    iFrames responsives

    Une solution élégante pour rendre les iFrames (cadres, dans lesquels on intègre d'autres pages) "responsive design" : Ils s'adapteront automatiquement et de manière proportionnelle à la dimension de la page.

    Lisez le tutoriel

    Lisez également ce tutoriel et aussi celui-là.

    pour créer un bandeau "responsive design", constitué de cellules indépendantes, au contenu varié, à placer en haut, en bas, dans la boite édito, dans un article...de votre site.

  • Audio-Players

    Audio-Players

    ¤ Un Audio-player à mettre en place dans un iFrame. Léger et "customisable", quelques skins en téléchargement lui sont destinées.

    Lisez le tutoriel

    ¤ Un Audio-player simple avec playlist également peut être intégré directement dans GuppY.

    Lisez le tutoriel

    ¤ Un autre Audio-player (JPlayer) avec playlist également peut être intégré directement dans GuppY.

    Lisez le tutoriel

  • Effets au survol

    Effets au survol

    Des astuces amusantes, surtout en CSS, pour agrémenter les sites.

    Au survol de la souris : des images qui changent, qui pivotent et font apparaitre un nouveau contenu, les boutons déroulants offrant de nouvelles informations, une boîte-menu déroulante (celle-là même que vous utilisez)... et d'autres, à venir, sans doute.

    La possibilité aussi de personnaliser des infobulles dans une image mappée cliquable générée par Gimp (traitement d'image libre et gratuit). Lisez le tutoriel

    Des liens vers des tutoriels sont disponibles dans le menu "Astuces>Changements au survol"

  • Skins

    Skins pour GuppY V5

    Quelques skins sont disponibles en téléchargement pour habiller les sites GuppY. Elles sont toutes compatibles "Config Look" et adaptées aux dernières versions (GuppY 5.02.05 et +) moyennant quelques champs à compléter dans "Config Look". Elles peuvent être testées sur Démo-skins.

    Démo-skins

    Zone de téléchargement

 
Vous êtes ici :   Accueil » Images avec Hover Effects Ideas-2
 
Prévisualiser...  Imprimer...  Imprimer la page...
Prévisualiser...  Imprimer...  Imprimer la section...
Recherche
 
Fermer

Calendrier

Astuces

Nouveau  Images avec Hover Effects Ideas-2

rss Cet article est disponible en format standard RSS pour publication sur votre site web :
http://www.71site.fr/data/fr-articles.xml

Des images avec Hover Effects Ideas

Voici la suite des 30 propositions de Mary Lou, que l'on peut trouver ici :
https://tympanus.net/codrops/2014/06/19/ideas-for-subtle-hover-effects/

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
  • M
  • O et R
  • S
  • Codes du corps de l'article

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: 40%; /*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éclancher 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
Catégorie : Astuces - Changements au survol
Page lue 551 fois


Réactions à cet article


Personne n'a encore laissé de commentaire.
Soyez donc le premier !

Vous êtes ici :   Accueil » Images avec Hover Effects Ideas-2

Préférences


Se reconnecter :
Votre nom (ou pseudo) :
Votre mot de passe
<O>


  Nombre de membres 41 membres
Connectés :
( personne )
Snif !!!

Lettre d'information

Pour avoir des nouvelles de ce site, inscrivez-vous à notre Newsletter.

Avant de soumettre ce formulaire, veuillez lire et accepter les Mentions légales.

J'accepte :
Recopier le code :
15 Abonnés