Ajouter feuille de style et script
Style et script : fichier ou code source
Service de téléchargements (v1)
Service de changement de skin (thème) à la volée
Service de calendrier avec des liens
Animations au survol - 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 (onglet 0) : Style commun est obligatoire. Ensuite, ajouter au même endroit les codes de style correspondant aux effets souhaités, en adaptant à l'aide des quelques commentaires. Il est possible d'encadrer ce style avec les balises [style type="text/css"]...[/style] et de le placer au début du code source de la boîte, de la page... Ou bien comme c'est le cas ici de le placer dans un fichier de style additionnel, nommé ici animsurvol_circle_hover_effects.css : Il est placé dans le dossier css des skins et son appel au début du code source est le suivant :
<link charset="utf-8" href="skin/css/animsurvol_circle_hover_effects.css" rel="stylesheet" />
Et, dans tous les cas, dans le code source de la page ou de la boîte, là où vous souhaitez placer les images, insérez le code correspondant (voir onglet 8 ou onglet 9 pour le code simplifié) 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;
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;
transition: all 0.4s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
}
.ch1-info h3 {
color: #fff; /*couleur du titre*/
background: transparent;
font: bold 22px 'verdana', sans-serif; /*police : gras taille nom*/
letter-spacing: 2px; /*écart entre les lettres*/
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: 12px 'verdana', sans-serif; /*police : taille nom*/
font-style: italic;
margin: 20px 30px 0 30px; /*marges extérieures*/
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;
transition: all 1s ease-in-out 0.4s;
}
.ch1-info p a {
display: block;
color: #fff; /*couleur du lien*/
background: transparent;
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);
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;
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;
transition: all 0.4s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
}
.ch2-info h3 {
color: #fff; /*couleur du titre*/
background: transparent;
position: relative;
font: bold 22px 'verdana', sans-serif; /*police : gras taille nom*/
letter-spacing: 2px; /*écart entre les lettres*/
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: 12px 'verdana', sans-serif; /*police : taille nom*/
font-style: italic;
margin: 20px 30px 0 30px; /*marges extérieures*/
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;
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);
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;
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;
transition: all 0.4s ease-in-out 0.2s;
}
.ch3-info h3 {
color: #fff; /*couleur du titre*/
background:transparent;
font: bold 22px 'verdana', sans-serif; /*police : gras taille nom*/
letter-spacing: 2px; /*écart entre les lettres*/
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: 12px 'verdana', sans-serif; /*police : taille nom*/
font-style: italic;
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;
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);
transform: scale(0);
opacity: 0;
}
.ch3-item:hover .ch3-info-back {
-webkit-transform: scale(1);
-moz-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%;
transform-origin: 95% 40%;
-webkit-transition: all 0.3s ease-in-out; /*temps de transition*/
-moz-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;
font: bold 22px 'verdana', sans-serif; /*police : gras taille nom*/
letter-spacing: 2px; /*écart entre les lettres*/
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: 12px 'verdana', sans-serif; /*police : taille nom*/
font-style: italic;
margin: 20px 30px 0 30px; /*marges extérieures*/
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;
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;
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);
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);
transform: rotate(-110deg);
}
.ch4-item:hover .ch4-info p a{
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
-moz-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;
perspective: 800px;
-webkit-transition: all 0.4s ease-in-out; /*temps de transition*/
-moz-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;
transition: all 0.4s ease-in-out;
-webkit-transform-style: preserve-3d;
-moz-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;
backface-visibility: hidden;
}
.ch5-info .ch5-info-back {
-webkit-transform: rotate3d(0,1,0,180deg);
-moz-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;
font: bold 22px 'verdana', sans-serif; /*police : gras taille nom*/
letter-spacing: 2px; /*écart entre les lettres*/
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: 12px 'verdana', sans-serif; /*police : taille nom*/
font-style: italic;
margin: 20px 30px 0 30px; /*marges extérieures*/
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;
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);
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;
transition: all 0.4s ease-in-out;
-webkit-perspective: 800px;
-moz-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;
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;
transition: all 0.6s ease-in-out;
}
.ch6-info .ch6-info-front {
-webkit-transform-origin: 50% 100%;
-moz-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;
font: bold 22px 'verdana', sans-serif; /*police : gras taille nom*/
letter-spacing: 2px; /*écart entre les lettres*/
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: 12px 'verdana', sans-serif; /*police : taille nom*/
font-style: italic;
margin: 20px 30px 0 30px; /*marges extérieures*/
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;
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);
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;
perspective: 900px;
}
.ch7-info{
position: absolute;
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-moz-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;
transition: all 0.4s linear;
-webkit-transform-origin: 50% 0%;
-moz-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);
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;
font: bold 22px 'verdana', sans-serif; /*police : gras taille nom*/
letter-spacing: 2px; /*écart entre les lettres*/
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: 12px 'verdana', sans-serif; /*police : taille nom*/
font-style: italic;
margin: 40px 30px 0 30px; /*marges extérieures*/
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;
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);
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);
transform: rotate3d(1,0,0,0deg);
opacity: 1;
}
Code du corps de la page, de la boîte
<div style="text-align:center;">
<div style="display: inline-block;">
<ul class="ch-grid">
<li>
<div class="ch1-item" style="background-image: url(images/tutoriels/images/eff1.jpg);">
<div class="ch1-info">
<h3>Circle Effect ¤1</h3><!-- titre -->
<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><!-- fin ch1-info -->
</div><!-- fin ch1-item -->
</li>
</ul><!-- fin ch-grid -->
</div><!-- fin inline-block -->
<div style="display: inline-block;">
<ul class="ch-grid">
<li>
<div class="ch2-item" style="background-image: url(images/tutoriels/images/eff2.jpg);">
<div class="ch2-info">
<h3>Circle Effect ¤2</h3><!-- titre -->
<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><!-- fin ch2-info -->
</div><!-- fin ch2-item -->
</li>
</ul><!-- fin ch-grid -->
</div><!-- fin inline-block -->
<div style="display: inline-block;">
<ul class="ch-grid">
<li>
<div class="ch3-item" style="background-image: url(images/tutoriels/images/eff3.jpg);">
<div class="ch3-info-wrap">
<div class="ch3-info">
<div class="ch3-info-front" style="background-image: url(images/tutoriels/images/eff3.jpg);">
</div><!-- fin ch3-info-front -->
<div class="ch3-info-back">
<h3>Circle Effect ¤3</h3><!-- titre -->
<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><!-- fin ch3-info-back -->
</div><!-- fin ch3-info -->
</div><!-- fin ch3-info-wrap -->
</div><!-- fin ch3-item -->
</li>
</ul><!-- fin ch-grid -->
</div><!-- fin inline-block -->
</div><!-- fin center -->
<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><!-- titre -->
<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><!-- fin ch4-info -->
<div class="ch4-thumb" style="background-image: url(images/tutoriels/images/eff4.jpg);z-index:1;">
</div><!-- fin ch4-thumb -->
</div><!-- fin ch4-item -->
</li>
</ul><!-- fin ch-grid -->
</div><!-- fin inline-block -->
<div style="display: inline-block;">
<ul class="ch-grid">
<li>
<div class="ch5-item" style="background-image: url(images/tutoriels/images/eff5.jpg);">
<div class="ch5-info-wrap">
<div class="ch5-info">
<div class="ch5-info-front" style="background-image: url(images/tutoriels/images/eff5.jpg);">
</div><!-- fin ch5-info-front -->
<div class="ch5-info-back">
<h3>Circle Effect ¤5</h3><!-- titre -->
<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><!-- fin ch5-info-back -->
</div><!-- fin ch5-info -->
</div><!-- fin ch5-info-wrap -->
</div><!-- fin ch5-item -->
</li>
</ul><!-- fin ch-grid -->
</div><!-- fin inline-block -->
<div style="display: inline-block;">
<ul class="ch-grid">
<li>
<div class="ch6-item" style="background-image: url(images/tutoriels/images/eff6.jpg);z-index:1;">
<div class="ch6-info-wrap">
<div class="ch6-info">
<div class="ch6-info-front" style="background-image: url(images/tutoriels/images/eff6.jpg);">
</div><!-- fin ch6-info-front -->
<div class="ch6-info-back">
<h3>Circle Effect ¤6</h3><!-- titre -->
<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><!-- fin ch6-info-back -->
</div><!-- fin ch6-info -->
</div><!-- fin ch5-info-wrap -->
</div><!-- fin ch6-item -->
</li>
</ul><!-- fin ch-grid -->
</div><!-- fin inline-block -->
</div><!-- fin center -->
<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(images/tutoriels/images/eff7.jpg);">
</div><!-- fin ch7-info-front -->
<div class="ch7-info-back">
<h3>Circle Effect ¤7</h3><!-- titre -->
<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><!-- fin ch7-info-back -->
</div><!-- fin ch7-info -->
</div><!-- fin ch7-item -->
</li>
</ul><!-- fin ch-grid -->
Code simplifié
<ul class="ch-grid">
<li>
<div class="chX-item">
...
</div><!-- fin chX-item -->
</li>
<li>
<div class="chX-item">
...
</div><!-- fin chX-item -->
</li>
<li>
<div class="chX-item">
...
</div><!-- fin chX-item -->
</li>
<li>
<div class="chX-item">
...
</div><!-- fin chX-item -->
</li>
<li>
<div class="chX-item">
...
</div><!-- fin chX-item -->
</li>
</ul><!-- fin ch-grid -->
Dans le code du corps de la page ou de la boîte (onglet 8) ci-dessus, seules les lignes du contenu des balises [ul class="ch-grid"]...[/ul][!-- fin ch-grid --] sont obligatoires. Les balises [div style="text-align:center;"]...[/div] et [div style="display: inline-block;"]...[/div] ainsi que [div style="clear:both;"][/div] ne servent qu'à centrer, à placer les images de ce tutoriel dans le flux ou à les faire retourner à la ligne. Mes images, ici, font toutes 220px de côté et sont dans un dossier tutoriels/images placé dans le dossier images à la racine d'adHoc. 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.
Attention ! Les éditeurs de textes dans adHoc ne gèrent pas bien les appels aux images dans, par exemple [div class="ch1-item" style="background-image: url(images/tutoriels/images/eff1.jpg)]. Il faudra donc revenir au code source après l'enregistrement afin de compléter le chemin des images en y ajoutant l'URL de votre site... (par exemple pour ce présent site j'ai ajouté //adhoc.71site.fr/ avant le chemin des images). C'est une vraie contrainte... j'en suis hélas, bien conscient... Une solution possible serait de replacer l'appel aux images dans le style (comme c'est le cas dans le tutoriel de l'auteure : Mary Lou). Mais cette solution est moins souple si on souhaite changer les images de temps en temps...
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'enchaînement le plus simple.
Sur les écrans tactiles, smartphones, tablettes... l'effet de survol, évidemment ne fonctionne pas et il faut "cliquer" pour déclencher l'effet.
Me contacter sur le forum de ce site pour toute question ou aide pour utiliser ces procédures.