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-1
 
Prévisualiser...  Imprimer...  Imprimer la page...
Prévisualiser...  Imprimer...  Imprimer la section...
Recherche
 
Fermer

Calendrier

Astuces

Nouveau  Images avec Hover Effects Ideas-1

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

Les 30 propositions de ces trois pages sont de Mary Lou, on peut les trouver ici :
https://tympanus.net/codrops/2014/06/19/ideas-for-subtle-hover-effects/

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

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

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

La première série montre 12 effets, classés par ordre alphabétique. La seconde série les 12 effets suivants et la troisième série, 6 effets supplémentaires faisant appel à une police d'icônes.

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

01-apollo

Effect Apollo

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

02-bubba

Effect Bubba

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

03-chico

Effect Chico

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

04-dexter

Effect Dexter

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

05-duke

Effect Duke

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

06-goliath

Effect Goliath

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

07-honey

Effect Honey

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

08-jazz

Effect Jazz

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

09-julia

Effect Julia

Voici 3 paragraphes

avec une arrivée

progressive

10-layla

Effect Layla

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

11-lexi

Effect Lexi

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

12-lily

Effect Lily

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

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

  • Style commun
  • A à C
  • D à G
  • H à J
  • L
  • 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 Apollo Bubba Chico

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

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

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

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

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

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

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

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

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

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

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

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

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

figure.effect-bubba figcaption::before,
figure.effect-bubba figcaption::after { /*figcaption : pseudo-élément pour dessiner le cadre*/
    position: absolute;
    top: 2rem; /*positions*/
    right: 2rem;
    bottom: 2rem;
    left: 2rem;
    content: ''; /*NE PAS SUPPRIMER*/
    opacity: 0; /*opacité*/
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
}

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

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

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

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

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

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

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

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

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

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

figure.effect-chico figcaption::before,
figure.effect-chico p { /*figcaption : pseudo-élément pour dessiner le cadre et paragraphe*/
    opacity: 0; /*opacité*/
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
}

figure.effect-chico h2 { /*titre*/
    padding: 20% 0 2rem 0; /*marges intérieures*/
}

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

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

Effects Dexter Duke Goliath

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

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

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

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

figure.effect-dexter figcaption::after { /*figcaption : pseudo-élément pour dessiner le cadre*/
    position: absolute;
    right: 1rem; /*positions*/
    bottom: 3rem;
    left: 1rem;
    height: -webkit-calc(50% - 2.5rem);
    height: calc(50% - 2.5rem); /*hauteur*/
    border: .2rem solid #fff; /*épaisseur nature et couleur de la bordure*/
    content: ''; /*NE PAS SUPPRIMER*/
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s; /*temps de transition*/
    -webkit-transform: translate3d(0,-100%,0);
    transform: translate3d(0,-100%,0); /*transformation : translationV*/
}

figure.effect-dexter:hover figcaption::after { /*figcaption : pseudo-élément pour dessiner le cadre au survol*/
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0); /*transformation : translation0*/
}

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

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

figure.effect-dexter p { /*paragraphe*/
    position: absolute;
    right: 3rem; /*positions*/
    bottom: 6rem;
    left: 3rem;
    opacity: 0; /*opacité*/
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
    -webkit-transform: translate3d(0,-10rem,0);
    transform: translate3d(0,-10rem,0); /*transformation : translationV*/
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Effects Honey Jazz Julia

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Effects Layla Lexi Lily

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

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

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

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

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

figure.effect-layla h2 { /*titre*/
    padding-top: 20%; /*marge intérieure haute*/
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s; /*temps de transition*/
    -webkit-transform: translate3d(0,-2rem,0);
    transform: translate3d(0,-2rem,0); /*transformation : translationV*/

}

figure.effect-layla p { /*paragraphe*/
    padding: 1rem 4rem; /*marges intérieures*/
    opacity: 0; /*opacité*/
    -webkit-transform: translate3d(0,-1rem,0);
    transform: translate3d(0,-1rem,0); /*transformation : translationV*/
}

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

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

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

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

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

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

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

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

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

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

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

figure.effect-lexi h2 { /*titre*/
    position: absolute;
    top:2rem; /*positions*/
    left:2rem;
    color: #484c61; /*couleur*/
    text-align: left; /*alignement*/
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s; /*temps de transition*/
    -webkit-transform: translate3d(.5rem,.5rem,0);
    transform: translate3d(.5rem,.5rem,0); /*transformation : translationsHV*/
}

figure.effect-lexi p { /*paragraphe*/
    position: absolute;
    right: .5rem; /*positions*/
    bottom: .5rem;
    padding: 0 1rem 1rem 0; /*marges intérieures*/
    width: 10rem; /*largeur*/
    text-align: right; /*alignement*/
    opacity: 0; /*opacité*/
    -webkit-transform: translate3d(2rem,2rem,0);
    transform: translate3d(2rem,2rem,0); /*transformation : translationsHV*/
}

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

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

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

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

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

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

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

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

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

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

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

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

Codes du corps de l'article

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

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

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

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

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

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

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

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

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

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

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

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

        </div>
        </figcaption>
    </figure>
</div>

Dans les codes du corps de l'article ci-dessus, le code est assez simple (voir cependant l'Effect Julia où il y a, dans l'exemple 3 paragraphes. Il faut placer toutes les parties <figure class="effect-xxxx">...</figure> dans un <div class="grid">...</div>.

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

Dans le style commun, pour les classes grid et figure il conviendra d'adapter les dimensions à votre convenance, et notamment les pourcentages ainsi que le min-width afin que les images ne soient pas inférieures à 300px par exemple pour les smartphones. Les valeurs dans les effets seront donc à adapter.

ATTENTION : Sur les écrans tactiles, smartphones, tablettes... l'effet de survol, évidemment ne fonctionne pas et il faut "cliquer" pour dé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 571 fois


Réactions à cet article


Réaction n°1 

par cdombo le 19/11/2018

salut JeanDenis....

heu comment dire ..... j'adore !

tu nous gattes !

bref, merci

cdom


Bonjour,

Merci pour ce commentaire.

Cordialement,

Jean-Denis


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

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