En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies pour vous proposer des contenus et services adaptés. 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 Circle Hover Effects
 
Prévisualiser...  Imprimer...  Imprimer la page...
Prévisualiser...  Imprimer...  Imprimer la section...
Recherche
 
Fermer
Calendrier
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 circulaires qui changent lors du survol de la souris avec des effets variés

Ces 7 propositions ci-dessous sont issues de ce site :
https://tympanus.net/codrops/2012/08/08/circle-hover-effects-with-css-transitions/ (auteur : Mary Lou)

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

Tout est téléchargeable sur le site. Je me suis juste contenté de jouer avec et de modifier à la marge les propositions. J'ai fait en sorte que les différents effets puissent tous s'afficher sur une même page. J'ai quelquefois simplifié l'effet et j'ai modifié l'ordre des présentations... et leur numéro. L'appel des images s'effectue dans le code du corps de l'article, et non dans le style comme dans les modèles. Cela a donc nécessité une réécriture partielle du code de style css.

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
  • ¤1
  • ¤2
  • ¤3
  • ¤4
  • ¤5
  • ¤6
  • ¤7
  • Codes du corps de l'article
  • Code simplifié

Style Commun

.ch-grid {
    margin: 10px 0 0 0; /*marge haute de la grille*/
    padding: 0;
    list-style: none;
    display: block;
    text-align: center;
    width: 100%;
}
.ch-grid:after,
.ch1-item:before,
.ch2-item:before,
.ch4-item:before,
.ch5-item:before,
.ch3-item:before,
.ch6-item:before,
.ch7-item:before { /*supprimer éventuellement les items inutiles*/
    content: '';
    display: table;
}
.ch-grid:after {
    clear: both;
}
.ch-grid li {
    width: 220px; /*largeur d'une image*/
    height: 220px; /*hauteur d'une image*/
    display: inline-block;
    margin: 5px; /*marges externes entre les images d'une grille*/
}

Circle Hover Style ¤1

.ch1-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    cursor: default;
    box-shadow: /*ombres portées intérieure -
qui crée l'effet d'anneau- et extérieure*/
        inset 0 0 0
16px rgba(255,255,255,0.6),
        0 1px 2px rgba(0,0,0,0.1);
    -webkit-transition: all 0.4s ease-in-out; /*temps de transition*/
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.ch1-info {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    opacity: 0;
    -webkit-transition: all 0.4s ease-in-out; /*temps de transition*/
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-backface-visibility: hidden;
}
.ch1-info h3 {
    color: #fff; /*couleur du titre*/
    background: transparent;
    letter-spacing: 2px; /*écart entre les lettres*/
    font-size: 22px; /*taille de la police*/
    margin: 0 30px; /*marges GD extérieures*/
    padding: 30px 0 0 0; /*marge H intérieure*/
    height: 100px; /*hauteur*/
    text-shadow: /*ombres portées du titre*/
        0 0 1px #fff,
        0 1px 2px rgba(0,0,0,0.3);
}
.ch1-info p {
    color: #fff; /*couleur du paragraphe*/
    background: transparent;
    padding: 10px 5px; /*marges intérieures*/
    font-style: italic;
    margin: 0 30px; /*marges GD extérieures*/
    font-size: 12px; /*taille de la police*/
    border-top: 1px solid rgba(255,255,255,0.7); /*bordure haute*/
    opacity: 0;
    -webkit-transition: all 1s ease-in-out 0.4s; /*temps de transition*/
    -moz-transition: all 1s ease-in-out 0.4s;
    -o-transition: all 1s ease-in-out 0.4s;
    -ms-transition: all 1s ease-in-out 0.4s;
    transition: all 1s ease-in-out 0.4s;
}
.ch1-info p a {
    display: block;
    color: #fff; /*couleur du lien*/
    background: transparent;
    font-size: 12px; /*taille de la police*/
    font-style: normal;
    letter-spacing: 1px; /*écart entre les lettres*/
    padding-top: 4px; /*marge intérieure haute*/
}
.ch1-info p a:hover {
    color: #FFF222; /*couleur du lien survolé*/
    background: transparent;
}
.ch1-item:hover {
    box-shadow: /*ombres portées intérieure et extérieure au survol*/
        inset 0 0 0 1px rgba(255,255,255,0.1),
        0 1px 2px rgba(0,0,0,0.1);
}
.ch1-item:hover .ch1-info {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
.ch1-item:hover .ch1-info p {
    opacity: 1;
}

Circle Hover Style ¤2

.ch2-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    cursor: default;
    box-shadow: /*ombres portées intérieure -
qui crée l'effet d'anneau- et extérieure*/
        inset 0 0 0 0 rgba(200,95,66, 0.4),
        inset 0 0 0
16px rgba(255,255,255,0.6),
        0 1px 2px rgba(0,0,0,0.1);
    -webkit-transition: all 0.4s ease-in-out; /*temps de transition*/
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.ch2-info {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    opacity: 0;
    -webkit-transition: all 0.4s ease-in-out; /*temps de transition*/
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-backface-visibility: hidden;
}
.ch2-info h3 {
    color: #fff; /*couleur du titre*/
    background: transparent;
    position: relative;
    letter-spacing: 2px; /*écart entre les lettres*/
    font-size: 22px; /*taille de la police*/
    margin: 0 30px; /*marges GD extérieures*/
    padding: 30px 0 0 0; /*marge H intérieure*/
    height: 100px; /*hauteur*/
    text-shadow: /*ombres portées du titre*/
        0 0 1px #fff,
        0 1px 2px rgba(0,0,0,0.3);
}
.ch2-info p {
    color: #fff; /*couleur du paragraphe*/
    background: transparent;
    padding: 10px 5px; /*marges intérieures*/
    font-style: italic;
    margin: 0 30px; /*marges GD extérieures*/
    font-size: 12px; /*taille de la police*/
    border-top: 1px solid rgba(255,255,255,0.7); /*bordure haute*/
}
.ch2-info p a {
    display: block;
    color: #fff; /*couleur du lien*/
    background: transparent;
    font-style: normal;
    font-size: 12px; /*taille de la police*/
    letter-spacing: 1px; /*écart entre les lettres*/
    padding-top: 4px; /*marge intérieure haute*/
}
.ch2-info p a:hover {
    color: #fff222; /*couleur du lien survolé*/
    background: transparent;
}
.ch2-item:hover {
    box-shadow: /*ombres portées au survol intérieures -
qui créent les effets d'anneau- et extérieure*/
        inset 0 0 0
110px rgba(200,95,66, 0.4),
        inset 0 0 0
16px rgba(255,255,255,0.8),
        0 1px 2px rgba(0,0,0,0.1);
}
.ch2-item:hover .ch2-info {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

Circle Hover Style ¤3

.ch3-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    cursor: default;
}
.ch3-info-wrap,
.ch3-info{
    position: absolute;
    width: 180px; /*largeur zone info*/
    height: 180px; /*hauteur zone info*/
    border-radius: 50%;
}
.ch3-info-wrap {
    top: 20px; /*position zone info*/
    left: 20px; /*position zone info*/
    background: #dadada; /*couleur fond zone info vide*/
    box-shadow: /*ombres portées extérieure -
qui crée l'effet d'anneau- et intérieure*/
        0 0 0
20px rgba(255,255,255,0.2),
        inset 0 0 3px rgba(128,128, 192, 0.9);
}
.ch3-info > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-position: center center;
    -webkit-backface-visibility: hidden;
}
.ch3-info .ch3-info-front {
    -webkit-transition: all 0.6s ease-in-out; /*temps de transition*/
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
.ch3-info .ch3-info-back {
    opacity: 0;
    background: #223e87; /*couleur fond zone info*/
    pointer-events: none;
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-transition: all 0.4s ease-in-out 0.2s; /*temps de transition*/
    -moz-transition: all 0.4s ease-in-out 0.2s;
    -o-transition: all 0.4s ease-in-out 0.2s;
    -ms-transition: all 0.4s ease-in-out 0.2s;
    transition: all 0.4s ease-in-out 0.2s;
}
.ch3-info h3 {
    color: #fff; /*couleur du titre*/
    background:transparent;
    letter-spacing: 2px; /*écart entre les lettres*/
    font-size: 22px; /*taille de la police*/
    margin: 0 20px; /*marges GD extérieures*/
    padding: 20px 0 0 0; /*marge H intérieure*/
    height: 80px; /*hauteur*/
    text-shadow: /*ombres portées du titre*/
        0 0 1px #fff,
        0 1px 2px rgba(0,0,0,0.3);
}
.ch3-info p {
    color: #fff; /*couleur du paragraphe*/
    background:transparent;
    padding: 10px 5px 0; /*marges intérieures*/
    font-style: italic;
    margin: 0 15px; /*marges GD extérieures*/
    font-size: 12px; /*taille de la police*/
    border-top: 1px solid rgba(255,255,255,0.7); /*bordure haute*/
}
.ch3-info p a {
    display: block;
    color: #e7615e; /*couleur du lien*/
    background:transparent;
    font-style: normal;
    font-size: 12px; /*taille de la police*/
    letter-spacing: 1px; /*écart entre les lettres*/
    padding-top: 4px; /*marge intérieure haute*/
}
.ch3-info p a:hover {
    color: #fff; /*couleur du lien survolé*/
    background:transparent;
}
.ch3-item:hover .ch3-info-front {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 0;
}
.ch3-item:hover .ch3-info-back {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);    
    opacity: 1;
    pointer-events: auto;
}

Circle Hover Style ¤4

.ch4-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    cursor: default;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.ch4-thumb {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    box-shadow: /*ombre portée intérieure de l'image -
qui crée l'effet d'anneau-*/
        inset 0 0 0
15px rgba(255,255,255, 0.5);
    -webkit-transform-origin: 95% 40%; /*origine de la transformation G H*/
    -moz-transform-origin: 95% 40%;
    -o-transform-origin: 95% 40%;
    -ms-transform-origin: 95% 40%;
    transform-origin: 95% 40%;
    -webkit-transition: all 0.3s ease-in-out; /*temps de transition*/
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.ch4-thumb:after {
    content: '';
    width: 8px; /*largeur axe rotation*/
    height: 8px; /*hauteur axe rotation*/
    position: absolute;
    border-radius: 50%;
    top: 40%; /*position haute axe rotation*/
    left: 95%; /*position gauche axe rotation*/
    margin: -4px 0 0 -4px; /*marges extérieures H D B G*/
    background: #0e0e0e; /*couleur de fond axe rotation*/
    box-shadow: 0 0 1px rgba(255,255,255,0.9);
}
.ch4-info {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: #c9512e; /*couleur de fond zone info*/
    box-shadow:  /*ombre portée intérieure -
qui crée l'effet d'anneau- dans la zone info*/
        inset 0 0 0
15px rgba(0,0,0,0.05);
}
.ch4-info h3 {
    color: #fff; /*couleur titre*/
    background:transparent;
    position: relative;
    letter-spacing: 2px; /*écart entre les lettres*/
    font-size: 22px; /*taille de la police*/
    margin: 0 40px; /*marges GD extérieures*/
    padding: 30px 0 0 0; /*marge H intérieure*/
    height: 70px; /*hauteur*/
    text-shadow: /*ombres portées du titre*/
        0 0 1px #fff,
        0 1px 2px rgba(0,0,0,0.3);
}
.ch4-info p {
    color: #fff; /*couleur du paragraphe*/
    background:transparent;
    padding: 10px 5px; /*marges intérieures*/
    font-style: italic;
    margin: 0 45px; /*marges GD extérieures*/
    font-size: 12px; /*taille de la police*/
    border-top: 1px solid rgba(255,255,255,0.7); /*bordure haute*/
}
.ch4-info p a {
    display: block;
    width: 75px; /*largeur zone lien*/
    height: 55px; /*hauteur zone lien*/
    background: rgba(255,255,255,0.3); /*couleur de fond zone lien*/
    border-radius: 50%;
    color: #fff; /*couleur du lien*/
    font-style: normal;
    font-size: 12px; /*taille de la police*/
    letter-spacing: 1px; /*écart entre les lettres*/
    padding-top: 15px; /*marge intérieure haute*/
    margin: 7px auto 0; /*marges extérieures H DG B*/
    opacity: 0;
    -webkit-transition: /*temps de transitions diverses*/
        -webkit-transform 0.3s ease-in-out 0.2s,
        opacity 0.3s ease-in-out 0.2s,
        background 0.2s linear 0s;
    -moz-transition:
        -moz-transform 0.3s ease-in-out 0.2s,
        opacity 0.3s ease-in-out 0.2s,
        background 0.2s linear 0s;
    -o-transition:
        -o-transform 0.3s ease-in-out 0.2s,
        opacity 0.3s ease-in-out 0.2s,
        background 0.2s linear 0s;
    -ms-transition:
        -ms-transform 0.3s ease-in-out 0.2s,
        opacity 0.3s ease-in-out 0.2s,
        background 0.2s linear 0s;
    transition:
        transform 0.3s ease-in-out 0.2s,
        opacity 0.3s ease-in-out 0.2s,
        background 0.2s linear 0s;
    -webkit-transform: translateX(60px) rotate(90deg);
    -moz-transform: translateX(60px) rotate(90deg);
    -o-transform: translateX(60px) rotate(90deg);
    -ms-transform: translateX(60px) rotate(90deg);
    transform: translateX(60px) rotate(90deg);
    -webkit-backface-visibility: hidden;
}
.ch4-info p a:hover {
    background: rgba(255,255,255,0.5); /*couleur de fond zone lien survolé*/
}
.ch4-item:hover .ch4-thumb {
    box-shadow: /*ombre portée intérieure de l'image -
qui crée l'effet d'anneau- au survol*/
        inset 0 0 0
15px rgba(255,255,255, 0.5),
        0 1px 3px rgba(0,0,0,0.2);
    -webkit-transform: rotate(-110deg);
    -moz-transform: rotate(-110deg);
    -o-transform: rotate(-110deg);
    -ms-transform: rotate(-110deg);
    transform: rotate(-110deg);
}
.ch4-item:hover .ch4-info p a{
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -moz-transform: translateX(0px) rotate(0deg);
    -o-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
}

Circle Hover Style ¤5

.ch5-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    cursor: default;
}
.ch5-info-wrap{
    position: absolute;
    width: 180px; /*largeur zone info*/
    height: 180px; /*hauteur zone info*/
    border-radius: 50%;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    -ms-perspective: 800px;
    perspective: 800px;
    -webkit-transition: all 0.4s ease-in-out; /*temps de transition*/
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    top: 20px; /*position zone info*/
    left: 20px; /*position zone info*/
    background: #dadada; /*couleur de fond zone info vide*/
    box-shadow: /*ombres portées extérieure -qui crée l'effet d'anneau- et intérieure*/
        0 0 0 20px rgba(255,255,255,0.2),
        inset 0 0 3px rgba(115,114, 23, 0.8);
}
.ch5-info{
    position: absolute;
    width: 180px; /*largeur zone info*/
    height: 180px; /*hauteur zone info*/
    border-radius: 50%;
    -webkit-transition: all 0.4s ease-in-out; /*temps de transition*/
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.ch5-info > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-position: center center;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}
.ch5-info .ch5-info-back {
    -webkit-transform: rotate3d(0,1,0,180deg);
    -moz-transform: rotate3d(0,1,0,180deg);
    -o-transform: rotate3d(0,1,0,180deg);
    -ms-transform: rotate3d(0,1,0,180deg);
    transform: rotate3d(0,1,0,180deg);
    background: #000; /*couleur de fond zone info*/
}
.ch5-info h3 {
    color: #fff; /*couleur du titre*/
    background:transparent;
    letter-spacing: 2px; /*écart entre les lettres*/
    font-size: 22px; /*taille de la police*/
    margin: 0 15px; /*marges DG extérieures*/
    padding: 25px 0 0 0; /*marge H intérieure*/
    height: 70px; /*hauteur*/
    text-shadow: /*ombres portées du titre*/
        0 0 1px #fff,
        0 1px 2px rgba(0,0,0,0.3);
}
.ch5-info p {
    color: #fff; /*couleur du paragraphe*/
    background:transparent;
    padding: 10px 5px; /*marges intérieures*/
    font-style: italic;
    margin: 0 20px; /*marges DG extérieures*/
    font-size: 12px; /*taille de la police*/
    border-top: 1px solid rgba(255,255,255,0.7); /*bordure haute*/
}
.ch5-info p a {
    display: block;
    color: #fff; /*couleur du lien*/
    background:transparent;
    font-style: normal;
    font-size: 12px; /*taille de la police*/
    letter-spacing: 1px; /*écart entre les lettres*/
    padding-top: 4px; /*marge intérieure haute*/
}
.ch5-info p a:hover {
    color: #fff222; /*couleur du lien survolé*/
    background:transparent;
}
.ch5-item:hover .ch5-info-wrap {
    box-shadow:
        0 0 0 0 rgba(255,255,255,0.8),
        inset 0 0 3px rgba(115,114, 23, 0.8);
}
.ch5-item:hover .ch5-info {
    -webkit-transform: rotate3d(0,1,0,-180deg);
    -moz-transform: rotate3d(0,1,0,-180deg);
    -o-transform: rotate3d(0,1,0,-180deg);
    -ms-transform: rotate3d(0,1,0,-180deg);
    transform: rotate3d(0,1,0,-180deg);
}

Circle Hover Style ¤6

.ch6-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    cursor: default;
}
.ch6-info-wrap,
.ch6-info{
    position: absolute;
    width: 180px; /*largeur zone info*/
    height: 180px; /*hauteur zone info*/
    border-radius: 50%;
    -webkit-transition: all 0.4s ease-in-out; /*temps de transition*/
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    -ms-perspective: 800px;
    perspective: 800px;
}
.ch6-info-wrap {
    top: 20px; /*position zone info*/
    left: 20px; /*position zone info*/
    background: #dadada; /*couleur de fond zone info vide*/
    box-shadow: /*ombres portées extérieure -
qui crée l'effet d'anneau- et intérieure*/
        0 0 0
20px rgba(255,255,255,0.2),
        inset 0 0 3px rgba(115,114, 23, 0.8);
}
.ch6-info {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.ch6-info > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-position: center center;
    -webkit-transition: all 0.6s ease-in-out; /*temps de transition*/
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
.ch6-info .ch6-info-front {
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;    
    z-index:1; /*mettre une valeur >0 qui convient*/
    box-shadow:
        inset 2px 1px 4px rgba(0,0,0,0.1);
}
.ch6-info h3 {
    color: #fff; /*couleur du titre*/
    background:transparent;
    letter-spacing: 2px; /*écart entre les lettres*/
    font-size: 22px; /*taille de la police*/
    margin: 0 20px; /*marges DG extérieures*/
    padding: 20px 0 0 0; /*marge H intérieure*/
    height: 70px; /*hauteur*/
    text-shadow: /*ombres portées du titre*/
        0 0 1px #fff,
        0 1px 2px rgba(0,0,0,0.3);
}
.ch6-info p {
    color: #fff; /*couleur du paragraphe*/
    background:transparent;
    padding: 10px 5px; /*marges intérieures*/
    font-style: italic;
    margin: 0 20px; /*marges DG extérieures*/
    font-size: 12px; /*taille de la police*/
    border-top: 1px solid rgba(255,255,255,0.7); /*bordure haute*/
}
.ch6-info p a {
    display: block;
    color: #fff; /*couleur du lien*/
    background:transparent;
    font-style: normal;
    font-size: 12px; /*taille de la police*/
    letter-spacing: 1px; /écart entre les lettres*/
    padding-top: 4px; /*marge intérieure haute*/
}
.ch6-info p a:hover {
    color: #fff222; /*couleur du lien survolé*/
    background:transparent;
}
.ch6-item:hover .ch6-info-front {
    -webkit-transform: rotate3d(1,0,0,-180deg);
    -moz-transform: rotate3d(1,0,0,-180deg);
    -o-transform: rotate3d(1,0,0,-180deg);
    -ms-transform: rotate3d(1,0,0,-180deg);
    transform: rotate3d(1,0,0,-180deg);    
    box-shadow:
        inset 0 0 5px rgba(255,255,255,0.2),
        inset 0 0 3px rgba(0,0,0,0.3);
}
.ch6-item:hover .ch6-info-back {
    background: #e6846b; /*couleur de fond zone info survolée*/
}

Circle Hover Style ¤7

.ch7-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    cursor: default;
    -webkit-perspective: 900px;
    -moz-perspective: 900px;
    -o-perspective: 900px;
    -ms-perspective: 900px;
    perspective: 900px;
}
.ch7-info{
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.ch7-info > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-position: center center;
    -webkit-transition: all 0.4s linear; /*temps de transition*/
    -moz-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    transition: all 0.4s linear;
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
}
.ch7-info .ch7-info-front {
    box-shadow: /*ombre portée intérieure de l'image -
qui crée l'effet d'anneau-*/
        inset 0 0 0
16px rgba(0,0,0,0.2);
}
.ch7-info .ch7-info-back {
    -webkit-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    -moz-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    -o-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    -ms-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    background: #000; /*couleur zone info*/
    box-shadow: /*ombre portée intérieure de la zone info -
qui crée l'effet d'anneau-*/
        inset 0 0 0
16px rgba(255,255,255,0.2);
    opacity: 0;
}
.ch7-info h3 {
    color: #fff; /*couleur du titre*/
    background:transparent;
    letter-spacing: 2px; /*écart entre les lettres*/
    font-size: 22px; /*taile de la police*/
    margin: 0 30px; /*marges DG extérieures*/
    padding: 40px 0 0 0; /*marge H intérieure*/
    height: 80px; /*hauteur*/
    text-shadow: /*ombres portées du titre*/
        0 0 1px #fff,
        0 1px 2px rgba(0,0,0,0.3);
}
.ch7-info p {
    color: #fff; /*couleur du paragraphe*/
    background:transparent;
    padding: 10px 20px; /*marges extérieures*/
    font-style: italic;
    margin: 0 30px; /*marges DG extérieures*/
    font-size: 12px; /*taille de la police*/
    border-top: 1px solid rgba(255,255,255,0.7); /*bordure haute*/
}
.ch7-info p a {
    display: block;
    color: #fff; /*couleur du lien*/
    background:transparent;
    font-style: normal;
    font-size: 12px; /*taille de la police*/
    letter-spacing: 1px; /*écart entre les lettres*/
    padding-top: 4px; /*marge intérieure haute*/
}
.ch7-info p a:hover {
    color: #fff222; /*couleur du lien survolé*/
    background:transparent;
}
.ch7-item:hover .ch7-info-front {
    -webkit-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    -moz-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    -o-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    -ms-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    opacity: 0;
}
.ch7-item:hover .ch7-info-back {
    -webkit-transform: rotate3d(1,0,0,0deg);
    -moz-transform: rotate3d(1,0,0,0deg);
    -o-transform: rotate3d(1,0,0,0deg);
    -ms-transform: rotate3d(1,0,0,0deg);
    transform: rotate3d(1,0,0,0deg);
    opacity: 1;
}

Codes du corps de l'article

<div style="text-align:center;">
    <div style="display: inline-block;">
        <ul class="ch-grid">
            <li>
                <div class="ch1-item" style="background-image: url(img/images/eff1.jpg);">
                    <div class="ch1-info">
                        <h3>Circle Effect ¤1</h3>
                        <p>par Mary Lou <a href="https://tympanus.net/codrops/2012/08/08/circle-hover-effects-with-css-transitions/" target="_blank">Voir article ici</a></p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div style="display: inline-block;">
        <ul class="ch-grid">
            <li>
                <div class="ch2-item" style="background-image: url(img/images/eff2.jpg);">
                    <div class="ch2-info">
                        <h3>Circle Effect ¤2</h3>
                        <p>par Mary Lou <a href="https://tympanus.net/codrops/2012/08/08/circle-hover-effects-with-css-transitions/" target="_blank">Voir article ici</a></p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div style="display: inline-block;">
        <ul class="ch-grid">
            <li>
                <div class="ch3-item" style="background-image: url(img/images/eff3.jpg);">
                    <div class="ch3-info-wrap">
                        <div class="ch3-info">
                            <div class="ch3-info-front" style="background-image: url(img/images/eff3.jpg);"></div>
                            <div class="ch3-info-back">
                                <h3>Circle Effect ¤3</h3>
                                <p>par Mary Lou <a href="https://tympanus.net/codrops/2012/08/08/circle-hover-effects-with-css-transitions/" target="_blank">Voir article ici</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

<div style="clear:both;"></div>

<div style="text-align:center;">
    <div style="display: inline-block;">
        <ul class="ch-grid">
            <li>
                <div class="ch4-item">    
                    <div class="ch4-info">
                        <h3>Circle Effect ¤4</h3>
                        <p>par Mary Lou <a href="https://tympanus.net/codrops/2012/08/08/circle-hover-effects-with-css-transitions/" target="_blank">Voir article ici</a></p>
                    </div>
                    <div class="ch4-thumb" style="background-image: url(img/images/eff4.jpg);z-index:1;"></div>
                </div>
            </li>
        </ul>
    </div>
    <div style="display: inline-block;">
        <ul class="ch-grid">
            <li>
                <div class="ch5-item" style="background-image: url(img/images/eff5.jpg);">
                    <div class="ch5-info-wrap">
                        <div class="ch5-info">
                            <div class="ch5-info-front" style="background-image: url(img/images/eff5.jpg);"></div>
                            <div class="ch5-info-back">
                                <h3>Circle Effect ¤5</h3>
                                <p>par Mary Lou <a href="https://tympanus.net/codrops/2012/08/08/circle-hover-effects-with-css-transitions/" target="_blank">Voir article ici</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div style="display: inline-block;">
        <ul class="ch-grid">
            <li>
                <div class="ch6-item" style="background-image: url(img/images/eff6.jpg);z-index:1;">
                    <div class="ch6-info-wrap">
                        <div class="ch6-info">
                            <div class="ch6-info-front" style="background-image: url(img/images/eff6.jpg);"></div>
                            <div class="ch6-info-back">
                                <h3>Circle Effect ¤6</h3>
                                <p>par Mary Lou <a href="https://tympanus.net/codrops/2012/08/08/circle-hover-effects-with-css-transitions/" target="_blank">Voir article ici</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

<div style="clear:both;"></div>

        <ul class="ch-grid">
            <li>
                <div class="ch7-item">
                    <div class="ch7-info">
                        <div class="ch7-info-front" style="background-image: url(img/images/eff7.jpg);"></div>
                        <div class="ch7-info-back">
                            <h3>Circle Effect ¤7</h3>
                            <p>par Mary Lou <a href="https://tympanus.net/codrops/2012/08/08/circle-hover-effects-with-css-transitions/" target="_blank">Voir article ici</a></p>
                        </div>
                    </div>
                </div>
            </li>
        </ul>

Code simplifié

<ul class="ch-grid">
    <li>
        <div class="chX-item"...>
            ...
        </div>
    </li>
    <li>
        <div class="chX-item"...>
            ...
        </div>
    </li>
    <li>
        <div class="chX-item"...>
            ...
        </div>
    </li>
    <li>
        <div class="chX-item"...>
            ...
        </div>
    </li>
    <li>
        <div class="chX-item"...>
            ...
        </div>
    </li>

</ul>

Dans les codes du corps de l'article ci-dessus, seules les lignes surlignées en vert sont obligatoires. Les lignes surlignées en jaune  ou en orange ne servent qu'à placer les images de ce tutoriel dans le flux ou à les faire retourner à la ligne. Les parties surlignées en blanc sont à adapter évidemment à vos besoins. Mes images, ici, font toutes 220px de côtés et sont dans un dossier images placé dans le dossier img à la racine de GuppY. Il faut évidemment adapter les sources à votre configuration. Notez que pour chaque effet, la partie <li>...</li> est différente, l'appel à l'image peut avoir lieu deux fois, et que pour les effets ¤4 et ¤6, il y a un z-index (empilement des images) à renseigner : mettre des valeurs supérieures à 0. L'image qui doit apparaitre au dessus doit avoir un z-index plus élevé que celui d'une image au dessous.

Dans le code simplifié, je n'ai placé que l'essentiel afin de ranger simplement les images dans le même flux, elles seront centrées dans la page automatiquement. Je n'ai pas détaillé le contenu dans les class="chX-item". C'est juste pour montrer l'enchainement le plus simple.

ATTENTION : Sur les écrans tactiles, smartphones, tablettes... l'effet de survol, évidemment ne fonctionne pas et il faut "cliquer" pour déclancher l'effet.

Amusez-vous bien...

Me contacter sur le forum de ce site pour toute question ou aide pour utiliser ces procédures.


Date de création : 09/09/2018 @ 19:20
Catégorie : Astuces - Changements au survol
Page lue 435 fois


Réactions à cet article

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

Vous êtes ici :   Accueil » Images avec Circle Hover Effects
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 :
15 Abonnés