Effet de survol pour la galerie verticale :

Voir site https://florenceguichard.jimdofree.com/drone/photo-par-drone/

/* effet de roll over sur la galerie verticale sur toutes les pages   */
.cc-m-gallery-stack-item {transition: all .2s ease-in-out;  -webkit-transition: all .2s ease-in-out;  -moz-transition: all .2s ease-in-out;  -o-transition: all .2s ease-in-out;   -ms-transition: all .2s ease-in-out; border-color: white;border-width: 3px; border-style: solid;}
.cc-m-gallery-stack-item:hover {transform: scale(1.05);  -webkit-transform: scale(1.05);  -moz-transform: scale(1.05);   -o-transform: scale(1.05); filter: brightness(1.2);-webkit-filter: brightness(1.2);-moz-filter: brightness(1.2);-o-filter: brightness(1.2);-ms-filter: brightness(1.2);    


Effet de survol pour la galerie d'images carré :

Transformation d'image (effet de survol) pour la galerie d'images

https://redesign-berlin-seminar.jimdo.com/images-und-slider/

/*Galerie Image-Transformation OnHover------------------------------*/

#cc-m-14130862130 .ccgalerie .thumb_sq3 {  background: #333;}
#cc-m-14130862130 .ccgalerie .thumb_sq3 img {   transform: scale(1.00);  transition: all 0.25s ease-in;}
#cc-m-14130862130 .ccgalerie .thumb_sq3:hover img {  transform: scale(1.02);  opacity: 0.5;}
 
#gallery_thumb_8462090930:hover:after,  
#gallery_thumb_8462091030:hover:after,
#gallery_thumb_8462091130:hover:after,
#gallery_thumb_8462091230:hover:after {content: "Bild 1"; position: absolute;  width: 120px; margin: -100px 0; z-index: 9999; font-size: 36px; font-weight:normal; color: white; display: block; text-align: center;}
#gallery_thumb_8462091030:hover:after {content: "Bild 2";}
#gallery_thumb_8462091130:hover:after {content: "Bild 3";}
#gallery_thumb_8462091230:hover:after {content: "Bild 4";}

Centrage de la galerie

https://expanding.jimdo.com/hacks/center-a-photo-gallery-element/

#cc-m-14130862130 { text-align: center; }
#cc-m-14130862130 .ccgalerie div.thumb_sq3 { display: inline-block; float: none;  }

 

OU

 

#cc-m-14130862130 { text-align: center; }
.ccgalerie div.thumb_pro1 { display: inline-block; float: none;  }