<style type="text/css">/*<![CDATA[*/
/*************** Style flashing des galeries horizontales ******************/
.cc-m-gallery-cool-item div:hover img { opacity: 1;-webkit-animation: flash 1.5s; animation: flash 1.5s;}
@-webkit-keyframes flash {0% {opacity: .4;}100% {opacity: 1;}}
@keyframes flash {0% {opacity: .4;} 100% {opacity: 1;}}.cc-m-gallery-cool img {border-radius: 5px;}
/*************** Style des galeries verticales ******************/
.cc-m-gallery-stack-column .cc-m-gallery-stack-item a {overflow: hidden;position: relative;background: #000;display: block;width: 100%; height: 100%;}.cc-m-gallery-stack-column
.cc-m-gallery-stack-item a img, .cc-m-gallery-stack-column .cc-m-gallery-stack-item a img:hover {-ms-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s
ease 0s; transition: all 0.5s ease 0s;cursor: pointer !important;}.cc-m-gallery-stack-column .cc-m-gallery-stack-item a img:hover { -ms-transform: scale(1.2); -moz-transform:
scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); -webkit-opacity: 0.8; opacity: 0.8;}.cc-m-gallery-stack-column .cc-m-gallery-stack-item a:after
{ font-family: jimdoiconfontweb !important; font-weight: normal;font-style: normal;text-decoration: inherit;-webkit-font-smoothing: antialiased;}.cc-m-gallery-stack-column
.cc-m-gallery-stack-item a:hover:after { content:'\E5F0'; position:absolute;z-index:9;top: 50%;left: 50%; -webkit-transform: translateY(-50%) translateX(-50%);-o-transform: translateY(-50%)
translateX(-50%);transform: translateY(-50%) translateX(-50%); color: #FFF; text-decoration: none !important; font-size: 0px;}
@media only screen and (max-width:767px) {.cc-m-gallery-stack-column .cc-m-gallery-stack-item a:after {content: '\E5F0'; position: absolute; z-index: 9; top: 50%; left: 50%; -webkit-transform:
translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); color: #FFF; text-decoration: none !important; font-size:
0rem;}.cc-m-gallery-stack-column .cc-m-gallery-stack-item a img {-ms-transform: scale(1.2); -moz-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); transform:
scale(1.2); -webkit-opacity: 0.8; opacity: 0.8;}}
@media only screen and (max-width:768px) {.cc-m-gallery-stack-column {width: 100% !important;}}
/*************** Galeries responsives ******************/
div.innerthumbnail img, div.innerthumbnail {width: 100% !important;height: auto !important;}.cc-m-gallery-container {overflow: visible;}div.ccgalerie div.thumb_pro1, div.ccgalerie div.thumb_pro2,
div.ccgalerie div.thumb_pro3, div.ccgalerie div.thumb_sq1, div.ccgalerie div.thumb_sq2, div.ccgalerie div.thumb_sq3 {width: auto !important;height: auto !important;-webkit-box-sizing:
border-box;-moz-box-sizing: border-box;box-sizing: border-box;}div.ccgalerie div.thumb_sq1 div, div.ccgalerie div.thumb_sq2 div, div.ccgalerie div.thumb_sq3 div {width: auto !important;height:
auto !important;display: table-cell;text-align: center;vertical-align: middle;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}div.ccgalerie div.thumb_sq1 div
img, div.ccgalerie div.thumb_sq2 div img, div.ccgalerie div.thumb_sq3 div img {width: 100% !important;height: auto !important;display: inline;vertical-align: middle;-webkit-box-sizing: border-box
!important;-ms-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;box-sizing: border-box !important;}
/************* Styles des vignettes des galeries d'images *****************/
/* Style rectangulaire n°1 */
div.ccgalerie div.thumb_pro1 div.innerthumbnail {display: block !important;height: auto !important;width: auto !important;overflow: hidden;}div.ccgalerie div.thumb_pro1 {margin: 0.4em
!important;height: auto !important;width: auto !important;border: none !important;background: transparent;-webkit-transition: all 0.30s linear;-moz-transition: all 0.30s linear;-o-transition: all
0.30s linear;transition: all 0.30s linear;}div.ccgalerie div.thumb_pro1 img {top: 0px !important;-webkit-transition: all 0.30s linear;-moz-transition: all 0.30s linear;-o-transition: all 0.30s
linear;transition: all 0.30s linear;}div.ccgalerie div.thumb_pro1 a:hover {opacity: 1 !important;}div.ccgalerie div.thumb_pro1 a:hover img {-webkit-transform: scale(1.2);-moz-transform:
scale(1.2);-ms-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);-webkit-transition: all 0.30s linear;-moz-transition: all 0.30s linear;-o-transition: all 0.30s
linear;transition: all 0.30s linear;}
/* Style rectangulaire n°2 */
div.ccgalerie div.thumb_pro2 {margin: 0.4em !important;padding: 0px;height: auto !important;width: auto !important;border: 1px solid rgba(0, 0, 0, 0.2) !important;background: #fff
url(https://u.jimcdn.com/cms/o/s8e84b1d86f5e7f1c/userlayout/img/blank.gif?t=1507973800) no-repeat center center/0% !important;} div.ccgalerie div.thumb_pro2 img {top: 0px !important;}
div.ccgalerie div.thumb_pro2 div.innerthumbnail {display: block !important;height: auto !important;width: 100% !important;} div.ccgalerie div.thumb_pro2:hover {background: rgba(0, 0, 0, 0.9)
url(https://u.jimcdn.com/cms/o/seff596a4145a1622/userlayout/img/magnifying-glass-128.png?t=1524335281) no-repeat center center/50% !important;-webkit-transition: all 300ms linear;-moz-transition:
all 300ms linear;-o-transition: all 300ms linear;transition: all 300ms linear;} div.ccgalerie div.thumb_pro2 a:hover img {opacity: 0.3 !important;background: rgba(0, 0, 0, 0.7)
!important;-webkit-transition: all 300ms linear;-moz-transition: all 300ms linear;-o-transition: all 300ms linear;transition: all 300ms linear;}
/* Style rectangulaire n°3 */
div.ccgalerie div.thumb_pro3 {margin: 0px !important;padding: 0px !important;height: auto !important;width: auto !important;} div.ccgalerie div.thumb_pro3 div.innerthumbnail {display: block
!important;height: auto !important;width: auto !important;} div.ccgalerie div.thumb_pro3 a:hover {opacity: 1 !important;} div.ccgalerie div.thumb_pro3 img {-webkit-transition: all 200ms
linear;-moz-transition: all 200ms linear;-o-transition: all 200ms linear;transition: all 200ms linear;padding: 0.6em;border: 1px solid rgba(0, 0, 0, 0.1) !important;background: rgb(255, 255,
255);-moz-box-shadow: 0 7px 7px -6px rgba(120,120,120,0.8);-webkit-box-shadow: 0 7px 7px -6px rgba(120, 120, 120, 0.8);box-shadow: 0 7px 7px -6px rgba(120, 120, 120, 0.8);} div.ccgalerie
div.thumb_pro3:nth-of-type(n+1) img {margin-top: 30px;} div.ccgalerie div.thumb_pro3:nth-of-type(2n+1) img {margin-top: 20px;} div.ccgalerie div.thumb_pro3:nth-of-type(3n+1) img {margin-top:
-15px;} div.ccgalerie div.thumb_pro3:nth-of-type(4n+1) img {margin-top: 20px;} div.ccgalerie div.thumb_pro3:nth-of-type(n+1) {-webkit-transform: rotate(-8deg);-moz-transform:
rotate(-8deg);-ms-transform: rotate(-8deg);-o-transform: rotate(-8deg);transform: rotate(-8deg);-webkit-transition: all 200ms linear;-moz-transition: all 200ms linear;-o-transition: all 200ms
linear;transition: all 200ms linear;} div.ccgalerie div.thumb_pro3:nth-of-type(2n+1) {-webkit-transform: rotate(13deg);-moz-transform: rotate(13deg);-ms-transform: rotate(13deg);-o-transform:
rotate(13deg);transform: rotate(13deg);-webkit-transition: all 200ms linear;-moz-transition: all 200ms linear;-o-transition: all 200ms linear;transition: all 200ms linear;} div.ccgalerie
div.thumb_pro3:nth-of-type(3n+1) {-webkit-transform: rotate(-4deg);-moz-transform: rotate(-4deg);-ms-transform: rotate(-4deg);-o-transform: rotate(-4deg);transform:
rotate(-4deg);-webkit-transition: all 200ms linear;-moz-transition: all 200ms linear;-o-transition: all 200ms linear;transition: all 200ms linear;} div.ccgalerie div.thumb_pro3:nth-of-type(4n+1)
{-webkit-transform: rotate(5deg);-moz-transform: rotate(5deg);-ms-transform: rotate(5deg);-o-transform: rotate(5deg);transform: rotate(5deg);-webkit-transition: all 200ms linear;-moz-transition:
all 200ms linear;-o-transition: all 200ms linear;transition: all 200ms linear;} div.ccgalerie div.thumb_pro3:nth-of-type(n+1) a:hover img {-webkit-transform: rotate(15deg)
!important;-moz-transform: rotate(15deg) !important;-ms-transform: rotate(15deg) !important;-o-transform: rotate(15deg) !important;transform: rotate(15deg) !important;-webkit-transition: all
200ms linear;-moz-transition: all 200ms linear;-o-transition: all 200ms linear;transition: all 200ms linear;} div.ccgalerie div.thumb_pro3:nth-of-type(2n+1) a:hover img {-webkit-transform:
rotate(20deg) !important;-moz-transform: rotate(20deg) !important;-ms-transform: rotate(20deg) !important;-o-transform: rotate(20deg) !important;transform: rotate(20deg)
!important;-webkit-transition: all 200ms linear;-moz-transition: all 200ms linear;-o-transition: all 200ms linear;transition: all 200ms linear;} div.ccgalerie div.thumb_pro3:nth-of-type(3n+1)
a:hover img {-webkit-transform: rotate(18deg) !important;-moz-transform: rotate(18deg) !important;-ms-transform: rotate(18deg) !important;-o-transform: rotate(18deg) !important;transform:
rotate(18deg) !important;-webkit-transition: all 200ms linear;-moz-transition: all 200ms linear;-o-transition: all 200ms linear;transition: all 200ms linear;} div.ccgalerie
div.thumb_pro3:nth-of-type(4n+1) a:hover img {-webkit-transform: rotate(-23deg) !important;-moz-transform: rotate(-23deg) !important;-ms-transform: rotate(-23deg) !important;-o-transform:
rotate(-23deg) !important;transform: rotate(-23deg) !important;-webkit-transition: all 200ms linear;-moz-transition: all 200ms linear;-o-transition: all 200ms linear;transition: all 200ms
linear;}
/* Style carré n°1 */
div.ccgalerie div.thumb_sq1 {margin: 0.4em !important;} div.ccgalerie div.thumb_sq1 a img { border: 1px solid rgba(0, 0, 0, 0.1) !important;-moz-border-radius: 50%;-webkit-border-radius:
50%;border-radius: 50%;background: #ffffff;padding: 5px;filter: drop-shadow(0px 3px 5px #ccc);-webkit-filter: drop-shadow(0px 3px 5px #ccc);-webkit-transition: all 1000ms cubic-bezier(0, 0.63,
0.13, 1.1);-moz-transition: all 1000ms cubic-bezier(0, 0.63, 0.13, 1.1);-o-transition: all 1000ms cubic-bezier(0, 0.63, 0.13, 1.1);transition: all 1000ms cubic-bezier(0, 0.63, 0.13,
1.1);}/*div.ccgalerie div.thumb_sq1 a:hover img {-moz-border-radius: 50%;-webkit-border-radius: 50%;border-radius: 50%;background: #fff;filter: drop-shadow(0px 0px 8px #aaa);-webkit-filter:
drop-shadow(0px 0px 8px #aaa);border: 1px solid rgba(255, 255, 255, 0)!important;-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);-o-transform:
rotate(360deg);transform: rotate(360deg);-webkit-transition: all 1000ms cubic-bezier(0, 0.63, 0.13, 1.1);-moz-transition: all 1000ms cubic-bezier(0, 0.63, 0.13, 1.1);-o-transition: all 1000ms
cubic-bezier(0, 0.63, 0.13, 1.1);transition: all 1000ms cubic-bezier(0, 0.63, 0.13, 1.1);}*/ div.ccgalerie div.thumb_sq1 a:hover img { -webkit-transform: scale(0.97);-moz-transform:
scale(0.97);-ms-transform: scale(0.97);-o-transform: scale(0.97);transform: scale(0.97);background: rgba(0, 0, 0, 0) !important;border: none;-webkit-transition: all 300ms linear;-moz-transition:
all 300ms linear;-o-transition: all 300ms linear;transition: all 300ms linear;}
/* Style carré n°2 */
div.ccgalerie div.thumb_sq2 {margin: 0.4em !important;padding: 5px;background: transparent !important;}div.ccgalerie div.thumb_sq2 a img {-webkit-box-sizing: border-box;-moz-box-sizing:
border-box;box-sizing: border-box;-webkit-transition: all 0.30s ease-in-out;-moz-transition: all 0.30s ease-in-out;-o-transition: all 0.30s ease-in-out;transition: all 0.30s ease-in-out;border:
1px solid rgba(34, 34, 34, 0.1);} div.ccgalerie div.thumb_sq2 a:hover img {box-shadow: 0px 0px 8px 2px rgba(121, 121, 121, 0.5);-moz-box-shadow : 0px 0px 8px 2px rgba(121, 121, 121,
0.5);-webkit-box-shadow : 0px 0px 8px 2px rgba(121, 121, 121, 0.5);border: 1px solid rgba(121, 121, 121, 0.5);-webkit-transition: all 0.30s ease-in-out;-moz-transition: all 0.30s
ease-in-out;-o-transition: all 0.30s ease-in-out;transition: all 0.30s ease-in-out;}
/* Style carré n°3 */
div.ccgalerie div.thumb_sq3 {margin: 0.4em !important;padding: 0.1em;border: 1px solid rgba(204, 204, 204, 0.51);background: rgb(255, 255, 255);width: auto !important;height: auto
!important;-webkit-transition: all 300ms linear;-moz-transition: all 300ms linear;-o-transition: all 300ms linear;transition: all 300ms linear;} div.ccgalerie div.thumb_sq3:hover {border: 1px
solid rgba(204, 204, 204, 0);background: rgba(204, 204, 204, 0.2);} div.ccgalerie div.thumb_sq3 a img {border: none;-webkit-transition: all 300ms linear;-moz-transition: all 300ms
linear;-o-transition: all 300ms linear;transition: all 300ms linear;background: rgba(0, 0, 0, 0) !important;} div.ccgalerie div.thumb_sq3 a:hover img {-webkit-transform:
scale(0.97);-moz-transform: scale(0.97);-ms-transform: scale(0.97);-o-transform: scale(0.97);transform: scale(0.97);background: rgba(0, 0, 0, 0) !important;border: none;-webkit-transition: all
300ms linear;-moz-transition: all 300ms linear;-o-transition: all 300ms linear;transition: all 300ms linear;}
/*]]>*/
</style>
Si photo transformé en amont au format carré :
Si photo transformé en amont au format carré :
Si photo transformé en amont au format carré :
<style type="text/css">
/*<![CDATA[*/
/**************************** Pretty-Gals pour Jimdo par Realia *********************/
/***** https://pretty-grids.jimdo.com ****/
/* V1 (29/04/2018) */
/*************** Style flashing des galeries horizontales ******************/
.cc-m-gallery-cool-item div:hover img { opacity: 1;-webkit-animation: flash 1.5s; animation: flash 1.5s;}
@-webkit-keyframes flash {0% {opacity: .4;}100% {opacity: 1;}}
@keyframes flash {0% {opacity: .4;} 100% {opacity: 1;}}
/*************** Style des galeries verticales ******************/
.cc-m-gallery-stack-column .cc-m-gallery-stack-item a {overflow: hidden;position: relative;background: #;display: block;width: 100%; height: 100%;}
.cc-m-gallery-stack-column .cc-m-gallery-stack-item a img, .cc-m-gallery-stack-column .cc-m-gallery-stack-item a img:hover {-ms-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s;cursor: pointer !important;}
.cc-m-gallery-stack-column .cc-m-gallery-stack-item a img:hover { -ms-transform: scale(1.2); -moz-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); -webkit-opacity: 0.8; opacity: 0.8;}
.cc-m-gallery-stack-column .cc-m-gallery-stack-item a:after { font-family: jimdoiconfontweb !important; font-weight: normal;font-style: normal;text-decoration: inherit;-webkit-font-smoothing: antialiased;}
.cc-m-gallery-stack-column .cc-m-gallery-stack-item a:hover:after { content:'\E5F0'; position:absolute;z-index:9;top: 50%;left: 50%; -webkit-transform: translateY(-50%) translateX(-50%);-o-transform: translateY(-50%) translateX(-50%);transform: translateY(-50%) translateX(-50%); color: #FFF; text-decoration: none !important; font-size: 40px;}
@media only screen and (max-width:767px) {.cc-m-gallery-stack-column .cc-m-gallery-stack-item a:after {content: '\E5F0'; position: absolute; z-index: 9; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); color: #FFF; text-decoration: none !important; font-size: 1rem;}
.cc-m-gallery-stack-column .cc-m-gallery-stack-item a img {-ms-transform: scale(1.2); -moz-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); -webkit-opacity: 0.8; opacity: 0.8;}}
@media only screen and (max-width:768px) {.cc-m-gallery-stack-column {width: 100% !important;}}
/**************************** Pretty-Grids pour Jimdo par Realia *********************/
/***** https://pretty-grids.jimdo.com ****/
/* Version minimale */
/* V2 (23/04/2018) */
/*************** Galeries responsives ******************/
div.innerthumbnail img, div.innerthumbnail {
width: 100% !important;
height: auto !important;
}
.cc-m-gallery-container {
overflow: visible;
}
div.ccgalerie div.thumb_pro1, div.ccgalerie div.thumb_pro2, div.ccgalerie div.thumb_pro3, div.ccgalerie div.thumb_sq1, div.ccgalerie div.thumb_sq2, div.ccgalerie div.thumb_sq3 {
width: auto !important;
height: auto !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div.ccgalerie div.thumb_sq1 div, div.ccgalerie div.thumb_sq2 div, div.ccgalerie div.thumb_sq3 div {
width: auto !important;
height: auto !important;
display: table-cell;
text-align: center;
vertical-align: middle;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div.ccgalerie div.thumb_sq1 div img, div.ccgalerie div.thumb_sq2 div img, div.ccgalerie div.thumb_sq3 div img {
width: 100% !important;
height: auto !important;
display: inline;
vertical-align: middle;
-webkit-box-sizing: border-box !important;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box !important;
}
/************* Styles des vignettes des galeries d'images *****************/
/* Style rectangulaire n°1 */
div.ccgalerie div.thumb_pro1 div.innerthumbnail {
display: block !important;
height: auto !important;
width: auto !important;
overflow: hidden;
}
div.ccgalerie div.thumb_pro1 {
margin: 0.4em !important;
height: auto !important;
width: auto !important;
border: none !important;
background: transparent;
-webkit-transition: all 0.30s linear;
-moz-transition: all 0.30s linear;
-o-transition: all 0.30s linear;
transition: all 0.30s linear;
}
div.ccgalerie div.thumb_pro1 img {
top: 0px !important;
-webkit-transition: all 0.30s linear;
-moz-transition: all 0.30s linear;
-o-transition: all 0.30s linear;
transition: all 0.30s linear;
}
div.ccgalerie div.thumb_pro1 a:hover {
opacity: 1 !important;
}
div.ccgalerie div.thumb_pro1 a:hover img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
-webkit-transition: all 0.30s linear;
-moz-transition: all 0.30s linear;
-o-transition: all 0.30s linear;
transition: all 0.30s linear;
}
/* Style rectangulaire n°2 */
div.ccgalerie div.thumb_pro2 {
margin: 0.4em !important;
padding: 0px;
height: auto !important;
width: auto !important;
border: 1px solid rgba(0, 0, 0, 0.2) !important;
background: #fff url(https://u.jimcdn.com/cms/o/s8e84b1d86f5e7f1c/userlayout/img/blank.gif?t=1507973800) no-repeat center center/0% !important;
}
div.ccgalerie div.thumb_pro2 img {
top: 0px !important;
}
div.ccgalerie div.thumb_pro2 div.innerthumbnail {
display: block !important;
height: auto !important;
width: 100% !important;
}
div.ccgalerie div.thumb_pro2:hover {
background: rgba(0, 0, 0, 0.9) url(https://u.jimcdn.com/cms/o/seff596a4145a1622/userlayout/img/magnifying-glass-128.png?t=1524335281) no-repeat center center/50% !important;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
transition: all 300ms linear;
}
div.ccgalerie div.thumb_pro2 a:hover img {
opacity: 0.3 !important;
background: rgba(0, 0, 0, 0.7) !important;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
transition: all 300ms linear;
}
/* Style rectangulaire n°3 */
div.ccgalerie div.thumb_pro3 {
margin: 0px !important;
padding: 0px !important;
height: auto !important;
width: auto !important;
}
div.ccgalerie div.thumb_pro3 div.innerthumbnail {
display: block !important;
height: auto !important;
width: auto !important;
}
div.ccgalerie div.thumb_pro3 a:hover {
opacity: 1 !important;
}
div.ccgalerie div.thumb_pro3 img {
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-o-transition: all 200ms linear;
transition: all 200ms linear;
padding: 0.6em;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
background: rgb(255, 255, 255);
-moz-box-shadow: 0 7px 7px -6px rgba(120,120,120,0.8);
-webkit-box-shadow: 0 7px 7px -6px rgba(120, 120, 120, 0.8);
box-shadow: 0 7px 7px -6px rgba(120, 120, 120, 0.8);
}
div.ccgalerie div.thumb_pro3:nth-of-type(n+1) img {
margin-top: 30px;
}
div.ccgalerie div.thumb_pro3:nth-of-type(2n+1) img {
margin-top: 20px;
}
div.ccgalerie div.thumb_pro3:nth-of-type(3n+1) img {
margin-top: -15px;
}
div.ccgalerie div.thumb_pro3:nth-of-type(4n+1) img {
margin-top: 20px;
}
div.ccgalerie div.thumb_pro3:nth-of-type(n+1) {
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-ms-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
transform: rotate(-8deg);
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-o-transition: all 200ms linear;
transition: all 200ms linear;
}
div.ccgalerie div.thumb_pro3:nth-of-type(2n+1) {
-webkit-transform: rotate(13deg);
-moz-transform: rotate(13deg);
-ms-transform: rotate(13deg);
-o-transform: rotate(13deg);
transform: rotate(13deg);
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-o-transition: all 200ms linear;
transition: all 200ms linear;
}
div.ccgalerie div.thumb_pro3:nth-of-type(3n+1) {
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-ms-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
transform: rotate(-4deg);
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-o-transition: all 200ms linear;
transition: all 200ms linear;
}
div.ccgalerie div.thumb_pro3:nth-of-type(4n+1) {
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-o-transform: rotate(5deg);
transform: rotate(5deg);
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-o-transition: all 200ms linear;
transition: all 200ms linear;
}
div.ccgalerie div.thumb_pro3:nth-of-type(n+1) a:hover img {
-webkit-transform: rotate(15deg) !important;
-moz-transform: rotate(15deg) !important;
-ms-transform: rotate(15deg) !important;
-o-transform: rotate(15deg) !important;
transform: rotate(15deg) !important;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-o-transition: all 200ms linear;
transition: all 200ms linear;
}
div.ccgalerie div.thumb_pro3:nth-of-type(2n+1) a:hover img {
-webkit-transform: rotate(20deg) !important;
-moz-transform: rotate(20deg) !important;
-ms-transform: rotate(20deg) !important;
-o-transform: rotate(20deg) !important;
transform: rotate(20deg) !important;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-o-transition: all 200ms linear;
transition: all 200ms linear;
}
div.ccgalerie div.thumb_pro3:nth-of-type(3n+1) a:hover img {
-webkit-transform: rotate(18deg) !important;
-moz-transform: rotate(18deg) !important;
-ms-transform: rotate(18deg) !important;
-o-transform: rotate(18deg) !important;
transform: rotate(18deg) !important;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-o-transition: all 200ms linear;
transition: all 200ms linear;
}
div.ccgalerie div.thumb_pro3:nth-of-type(4n+1) a:hover img {
-webkit-transform: rotate(-23deg) !important;
-moz-transform: rotate(-23deg) !important;
-ms-transform: rotate(-23deg) !important;
-o-transform: rotate(-23deg) !important;
transform: rotate(-23deg) !important;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-o-transition: all 200ms linear;
transition: all 200ms linear;
}
/* Style carré n°1 */
div.ccgalerie div.thumb_sq1 {
margin: 0.4em !important;
}
div.ccgalerie div.thumb_sq1 a img {
border: 1px solid rgba(0, 0, 0, 0.1) !important;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #ffffff;
padding: 5px;
filter: drop-shadow(0px 3px 5px #ccc);
-webkit-filter: drop-shadow(0px 3px 5px #ccc);
-webkit-transition: all 1000ms cubic-bezier(0, 0.63, 0.13, 1.1);
-moz-transition: all 1000ms cubic-bezier(0, 0.63, 0.13, 1.1);
-o-transition: all 1000ms cubic-bezier(0, 0.63, 0.13, 1.1);
transition: all 1000ms cubic-bezier(0, 0.63, 0.13, 1.1);
}
/*
div.ccgalerie div.thumb_sq1 a:hover img {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #fff;
filter: drop-shadow(0px 0px 8px #aaa);
-webkit-filter: drop-shadow(0px 0px 8px #aaa);
border: 1px solid rgba(255, 255, 255, 0)!important;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 1000ms cubic-bezier(0, 0.63, 0.13, 1.1);
-moz-transition: all 1000ms cubic-bezier(0, 0.63, 0.13, 1.1);
-o-transition: all 1000ms cubic-bezier(0, 0.63, 0.13, 1.1);
transition: all 1000ms cubic-bezier(0, 0.63, 0.13, 1.1);
}
*/
div.ccgalerie div.thumb_sq1 a:hover img {
-webkit-transform: scale(0.97);
-moz-transform: scale(0.97);
-ms-transform: scale(0.97);
-o-transform: scale(0.97);
transform: scale(0.97);
background: rgba(0, 0, 0, 0) !important;
border: none;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
transition: all 300ms linear;
}
/* Style carré n°2 */
div.ccgalerie div.thumb_sq2 {
margin: 0.4em !important;
padding: 5px;
background: transparent !important;
}
div.ccgalerie div.thumb_sq2 a img {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
transition: all 0.30s ease-in-out;
border: 1px solid rgba(34, 34, 34, 0.1);
}
div.ccgalerie div.thumb_sq2 a:hover img {
box-shadow: 0px 0px 8px 2px rgba(121, 121, 121, 0.5);
-moz-box-shadow : 0px 0px 8px 2px rgba(121, 121, 121, 0.5);
-webkit-box-shadow : 0px 0px 8px 2px rgba(121, 121, 121, 0.5);
border: 1px solid rgba(121, 121, 121, 0.5);
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
transition: all 0.30s ease-in-out;
}
/* Style carré n°3 */
div.ccgalerie div.thumb_sq3 {
margin: 0.4em !important;
padding: 0.1em;
border: 1px solid rgba(204, 204, 204, 0.51);
background: rgb(255, 255, 255);
width: auto !important;
height: auto !important;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
transition: all 300ms linear;
}
div.ccgalerie div.thumb_sq3:hover {
border: 1px solid rgba(204, 204, 204, 0);
background: rgba(204, 204, 204, 0.2);
}
div.ccgalerie div.thumb_sq3 a img {
border: none;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
transition: all 300ms linear;
background: rgba(0, 0, 0, 0) !important;
}
div.ccgalerie div.thumb_sq3 a:hover img {
-webkit-transform: scale(0.97);
-moz-transform: scale(0.97);
-ms-transform: scale(0.97);
-o-transform: scale(0.97);
transform: scale(0.97);
background: rgba(0, 0, 0, 0) !important;
border: none;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
transition: all 300ms linear;
}
/**************************** Pretty-Grids pour Jimdo par Realia *********************/
/***** https://pretty-grids.jimdo.com ****/
/* Add-On : centrer les galeries en version mobile uniquement */
/* V1 (16/10/2017) */
/*************** Centrer les galeries en version mobile uniquement ******************/
@media (max-width: 768px){
.cc-m-gallery-container {text-align: center;}
.ccgalerie div.thumb_pro1, .ccgalerie div.thumb_pro2, .ccgalerie div.thumb_pro3, .ccgalerie div.thumb_sq1, .ccgalerie div.thumb_sq2, .ccgalerie div.thumb_sq3 {
float: none;
display:inline-block;
}
}
/**************************** Pretty-Grids pour Jimdo par Realia *********************/
/***** https://pretty-grids.jimdo.com ****/
/* Add-on : centrer les galeries */
/* V1 (16/10/2017) */
/*************** Toujours centrer les galeries ******************/
.cc-m-gallery-container {text-align: center;}
.ccgalerie div.thumb_pro1, .ccgalerie div.thumb_pro2, .ccgalerie div.thumb_pro3, .ccgalerie div.thumb_sq1, .ccgalerie div.thumb_sq2, .ccgalerie div.thumb_sq3 {
float: none;
display:inline-block;
}
/*]]>*/
</style>
Dernière mise à jour : 02/07/2024