feat: effet de zoom sur les images aussi sur les carousel et sur les goodies

noisettes/sommaire_modeportailcognac_cycloshow.html

@@ -9,14 +9,14 @@
 		<div class="slider show-for-medium" role="region" aria-label="Diaporama d'accueil">
 			<div class="slider-diapo-imgfull">
 				<a href="#URL_ARTICLE">
-					<picture>
+					<div class="img-hover-zoom lent grand"><picture>
 						<source srcset="[(#LOGO_ARTICLE_NORMAL|sinon{#LOGO_RUBRIQUE_NORMAL}|sinon{#CHEMIN{images/placeholder.jpg}}|image_focus{[(#CONFIG{soyezcreateurs/variante_bloccycloshow,contenu}|=={contenu}|?{#CONFIG{soyezcreateurs_layout/largeurconteneur,960},1920})],#CONFIG{soyezcreateurs/hauteur_slider,580}}|image_aplatir{jpg,#CONFIG{soyezcreateurs_couleurs/container_bk,#f6f6f6}}|extraire_attribut{src})]" media="(min-width: 1160px)" />
 						[(#CONFIG{soyezcreateurs_layout/largeurconteneur,960}|>{1024}|oui)<source srcset="[(#LOGO_ARTICLE_NORMAL|sinon{#LOGO_RUBRIQUE_NORMAL}|sinon{#CHEMIN{images/placeholder.jpg}}|image_focus{#CONFIG{soyezcreateurs_layout/largeurconteneur,960},[(#CONFIG{soyezcreateurs/hauteur_slider,580}|div{1.4})]}|extraire_attribut{src})]" media="(min-width: #CONFIG{soyezcreateurs_layout/largeurconteneur,960}px)" />]
 						<source srcset="[(#LOGO_ARTICLE_NORMAL|sinon{#LOGO_RUBRIQUE_NORMAL}|sinon{#CHEMIN{images/placeholder.jpg}}|sinon{#CHEMIN{images/placeholder.jpg}}|sinon{#CHEMIN{images/placeholder.jpg}}|image_focus{1024,[(#CONFIG{soyezcreateurs/hauteur_slider,580}|div{1.6})]}|extraire_attribut{src})]" media="(min-width: 1024px)" />
 						<source srcset="[(#LOGO_ARTICLE_NORMAL|sinon{#LOGO_RUBRIQUE_NORMAL}|sinon{#CHEMIN{images/placeholder.jpg}}|sinon{#CHEMIN{images/placeholder.jpg}}|sinon{#CHEMIN{images/placeholder.jpg}}|image_focus{640,[(#CONFIG{soyezcreateurs/hauteur_slider,580}|div{1.9})]}|extraire_attribut{src})]" media="(min-width: 640px)" />
 						<source srcset="[(#LOGO_ARTICLE_NORMAL|sinon{#LOGO_RUBRIQUE_NORMAL}|sinon{#CHEMIN{images/placeholder.jpg}}|sinon{#CHEMIN{images/placeholder.jpg}}|image_focus{320,[(#CONFIG{soyezcreateurs/hauteur_slider,580}|div{2})]}|image_aplatir{jpg,#CONFIG{soyezcreateurs_couleurs/container_bk,#f6f6f6}}|extraire_attribut{src})]" />
 						<img src="[(#LOGO_ARTICLE_NORMAL|sinon{#LOGO_RUBRIQUE_NORMAL}|sinon{#CHEMIN{images/placeholder.jpg}}|image_focus{320,[(#CONFIG{soyezcreateurs/hauteur_slider,580}|div{2})]}|image_aplatir{jpg,#CONFIG{soyezcreateurs_couleurs/container_bk,#f6f6f6}}|extraire_attribut{src})]" alt="" width="320" height="[(#CONFIG{soyezcreateurs/hauteur_slider,580}|div{2})]" />
-					</picture>
+					</picture></div>
 					<div class="slider-content desc-gauche text-center">
 						<h2 class="#EDIT{titre}">#TITRE</h2>
 						[<p class="hide-for-small-only #EDIT{descriptif}">(#DESCRIPTIF|ptobr)</p>]

noisettes/sommaire_modeportailcognac_goodies.html

@@ -13,7 +13,7 @@
 			<div class="content-pratique #EDIT{titre}">
 				<a href="#ARTICLE_URL"[ title="(#DESCRIPTIF|supprimer_tags|attribut_html)"]>
 					[(#SET{picto,[(#LOGO_ARTICLE_SURVOL|sinon{#LOGO_ARTICLE_NORMAL}|sinon{#LOGO_RUBRIQUE_NORMAL}|sinon{#CHEMIN{images/placeholder.jpg}}|image_focus{280,190})]})]
-					<img data-lazy="[(#GET{picto}|extraire_attribut{src})]" width="[(#GET{picto}|largeur)]" height="[(#GET{picto}|hauteur)]" alt="" />
+					<div class="img-hover-zoom"><img data-lazy="[(#GET{picto}|extraire_attribut{src})]" width="[(#GET{picto}|largeur)]" height="[(#GET{picto}|hauteur)]" alt="" /></div>
 					<div class="h2"><span class="titre-pratique">#TITRE</span>
 						<svg class="svg-icon"><use xlink:href="#CHEMIN{images/icones/picto-defs.svg}#icon-arrow-right2"></use></svg>
 					</div>

noisettes/sommaire_modeportailcognac_zoomsur.html

@@ -11,14 +11,14 @@
 			<div class="slider-diapo-imgfull">
 				<a href="#GET{article_url}"[ title="(#_ZoomSur:DESCRIPTIF|supprimer_tags|attribut_html)"]>
 					[(#MEDIA|=={image}|oui)
-					<picture>
+					<div class="img-hover-zoom lent grand"><picture>
 						<source srcset="[(#FICHIER|copie_locale|image_focus{1920,#CONFIG{soyezcreateurs/hauteur_slider,580}}|extraire_attribut{src})]" media="(min-width: 1160px)" />
 						[(#CONFIG{soyezcreateurs_layout/largeurconteneur,960}|>{1024}|oui)[(#CONFIG{soyezcreateurs_layout/largeurconteneur,960}|<{1160}|oui)<source srcset="[(#FICHIER|copie_locale|image_focus{#CONFIG{soyezcreateurs_layout/largeurconteneur,960},[(#CONFIG{soyezcreateurs/hauteur_slider,580}|div{1.2})]}|extraire_attribut{src})]" media="(min-width: #CONFIG{soyezcreateurs_layout/largeurconteneur,960}px)" />]]
 						<source srcset="[(#FICHIER|copie_locale|image_focus{1024,[(#CONFIG{soyezcreateurs/hauteur_slider,580}|div{1.4})]}|extraire_attribut{src})]" media="(min-width: 1024px)" />
 						<source srcset="[(#FICHIER|copie_locale|image_focus{640,[(#CONFIG{soyezcreateurs/hauteur_slider,580}|div{1.8})]}|extraire_attribut{src})]" media="(min-width: 640px)" />
 						<source srcset="[(#FICHIER|copie_locale|image_focus{320,[(#CONFIG{soyezcreateurs/hauteur_slider,580}|div{2.5})]}|extraire_attribut{src})]" />
 						<img src="[(#FICHIER|copie_locale|image_focus{320,[(#CONFIG{soyezcreateurs/hauteur_slider,580}|div{2.5})]}|extraire_attribut{src})]" alt="" width="320" height="[(#CONFIG{soyezcreateurs/hauteur_slider,580}|div{2.5})]" />
-					</picture>
+					</picture></div>
 					]
 					[(#MEDIA|=={video}|oui)
 					<div class="bg-video">
@@ -39,7 +39,7 @@
 		<div class="slider show-for-medium" role="region" aria-label="Diaporama d'accueil">
 			<div class="slider-diapo-imgfull">
 				<a href="#GET{article_url}"[ title="(#_ZoomSur:DESCRIPTIF|supprimer_tags|attribut_html)"]>
-					<img src="[(#CHEMIN{images/placeholder.jpg}|image_focus{1920,#CONFIG{soyezcreateurs/hauteur_slider,580}}|extraire_attribut{src})]" alt="" />
+					<div class="img-hover-zoom lent grand"><img src="[(#CHEMIN{images/placeholder.jpg}|image_focus{1920,#CONFIG{soyezcreateurs/hauteur_slider,580}}|extraire_attribut{src})]" alt="" /></div>
 				</a>
 			</div>
 		</div>

stylessoyezcreateurs.css.html

@@ -3670,11 +3670,17 @@ dialog {
 .img-hover-zoom img {
   transition: transform .5s ease;
 }
+.img-hover-zoom.lent {
+  transition: transform 1s ease;
+}
 
 /* [3] Finally, transforming the image when container gets hovered */
 a:hover .img-hover-zoom img {
   transform: scale(1.1);
 }
+a:hover .img-hover-zoom.grand {
+  transform: scale(1.04);
+}
 
 .grid-item {
   margin-bottom: 20px;