Images avec Circle Hover Effects

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 (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.

Circle Effect ¤1

par Mary Lou Voir article ici

Circle Effect ¤2

par Mary Lou Voir article ici

Circle Effect ¤3

par Mary Lou Voir article ici

Circle Effect ¤4

par Mary Lou Voir article ici

Circle Effect ¤5

par Mary Lou Voir article ici

Circle Effect ¤6

par Mary Lou Voir article ici

Circle Effect ¤7

par Mary Lou Voir article ici

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

.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*/
   font-weight: bold; /*gras de la police :bold ou normal*/
   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: 20px 30px 0px 30px; /*marges extérieures HDBG*/
   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*/
   font-weight: bold; /*gras de la police :bold ou normal*/
   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: 20px 30px 0px 30px; /*marges extérieures HDBG*/
   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*/
   font-weight: bold; /*gras de la police :bold ou normal*/
   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: 20px 30px 0px 30px; /*marges extérieures HDBG*/
   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*/
   font-weight: bold; /*gras de la police :bold ou normal*/
   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: 20px 30px 0px 30px; /*marges extérieures HDBG*/
   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: 75px; /*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: 18px; /*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*/
   font-weight: bold; /*gras de la police :bold ou normal*/
   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: 20px 30px 0px 30px; /*marges extérieures HDBG*/
   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*/
   font-weight: bold; /*gras de la police :bold ou normal*/
   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: 20px 30px 0px 30px; /*marges extérieures HDBG*/
   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*/
   font-weight: bold; /*gras de la police :bold ou normal*/
   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: 40px 30px 0px 30px; /*marges extérieures HDBG*/
   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éclencher 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 86019 fois

Bienvenue !

Et les navigateurs ?

Skins série "Transparences" présentées avec Camera !

Camera : slider développé par Manuel Masia

À quoi servent ces iFrames ?

Des bandeaux avec des cellules (tuiles) indépendantes

Trois AudioPlayers

Quelques exemples d'effets obtenus au survol

... et bien d'autres encore, suivez ces liens...

Astuces en pur CSS

Images avec Circle Hover Effects

Circle Effect ¤1

Circle Effect ¤2

Circle Effect ¤3

Circle Effect ¤4

Circle Effect ¤5

Circle Effect ¤6

Circle Effect ¤7