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

Calendrier

Astuces

Nouveau  Images avec Hover Effects Ideas-3

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

25-hera

Effect Hera

   

26-kira

Effect Kira

   

27-phoebe

Effect Phoebe

  

28-terry

Effect Terry

   

29-winston

Effect Winston

  

30-zoe

Effect Zoe

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

  

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

<link href="img/HoverEffectImg/font-awesome-4.2.0/css/font-awesome.css" rel="stylesheet" type="text/css" />


Ensuite, ajouter au même endroit les codes correspondant aux effets souhaités, en adaptant à l'aide des quelques commentaires.
ATTENTION, si le style n'est pas dans styleplus.css, il faut placer les balises <style type="text/css"> au début du code source et </style> à la fin du style.

Puis dans le code source du corps de l'article ou de la boite libre, là où vous souhaitez placer les images, insérez le code correspondant à chaque effet en adaptant les contenus, bien sûr.

  • Style commun
  • Hera et Kira
  • Phoebe et Terry
  • Winston et Zoe
  • 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 Hera Kira

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Effects Phoebe Terry

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

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

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

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

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

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

Effects Winston Zoe

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

Codes du corps de l'article

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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