feat : un petit effet de zoom sur les tuiles

noisettes/plan/inc_antichrono_grid.html

@@ -130,7 +130,7 @@
 			<div class="grid-item[ (#CLASS)]">
 				<div class="content-actus alaune[ (#COULEURRUBRIQUE)]">
 					<a href="#URL"[ title="(#DESCRIPTIF|supprimer_tags|attribut_html)"]>
-						[<img src="(#LOGO|image_focus{308,#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340}}|extraire_attribut{src})" alt="" width="308" height="#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340}" />]
+						[<div class="img-hover-zoom"><img src="(#LOGO|image_focus{308,#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340}}|extraire_attribut{src})" alt="" width="308" height="#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340}" /></div>]
 						<div class="h2" tabindex="-1"><span class="titre-actus">#TITRE[ <span class="secondary-information">((#TYPE))</span>]</span>
 							<svg class="svg-icon"><use xlink:href="#CHEMIN{images/icones/picto-defs.svg}#icon-arrow-right2"></use></svg></div>
 					</a>

noisettes/sommaire/sommaire_modeportailcognac_quoideneuf.html

@@ -29,7 +29,7 @@
 			<div class="grid-item[ grid-item-x(#GET{facteur})]">
 				<div class="content-actus alaune #EDIT{titre}<BOUCLE_RubriqueColoreealaune(HIERARCHIE){id_rubrique}{tout}{type_mot=_CouleurRubrique}{inverse} {0,1}><BOUCLE_CouleurRubriquealaune(MOTS){id_rubrique}{type=_CouleurRubrique}{0,1}> couleurrubrique#ID_MOT</BOUCLE_CouleurRubriquealaune></BOUCLE_RubriqueColoreealaune>">
 					<a href="#URL_ARTICLE"[ title="(#DESCRIPTIF|supprimer_tags|attribut_html)"]>
-						[<img src="(#GET{logo}|image_focus{#GET{largeur},#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340}}|extraire_attribut{src})" alt="" width="#GET{largeur}" height="#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340}" />]
+						[<div class="img-hover-zoom"><img src="(#GET{logo}|image_focus{#GET{largeur},#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340}}|extraire_attribut{src})" alt="" width="#GET{largeur}" height="#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340}" /></div>]
 						<div class="h2" tabindex="-1">
 							<svg class="svg-icon alaune"[ title="(#CONFIG{soyezcreateurs/texte_alaune}|extraire_multi|typo|sinon{<:soyezcreateurs:alaune:>}|supprimer_tags|attribut_html)"]><use xlink:href="#CHEMIN{images/icones/picto-defs.svg}#icon-star-full"></use></svg>
 							<span class="titre-actus">#TITRE</span>
@@ -68,7 +68,7 @@
 			<div class="grid-item[ grid-item-x(#GET{facteur})]">
 				<div class="content-actus alaune #EDIT{titre}<BOUCLE_RubriqueColoreeBreve(HIERARCHIE){id_rubrique}{tout}{type_mot=_CouleurRubrique}{inverse} {0,1}><BOUCLE_CouleurRubriqueBreve(MOTS){id_rubrique}{type=_CouleurRubrique}{0,1}> couleurrubrique#ID_MOT</BOUCLE_CouleurRubriqueBreve></BOUCLE_RubriqueColoreeBreve>">
 					<a href="#URL_BREVE"[ title="(#DESCRIPTIF|supprimer_tags|attribut_html)"]>
-						[<img src="(#GET{logo}|image_focus{#GET{largeur},#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340}}|extraire_attribut{src})" alt="" width="#GET{largeur}" height="#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340}" />]
+						[<div class="img-hover-zoom"><img src="(#GET{logo}|image_focus{#GET{largeur},#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340}}|extraire_attribut{src})" alt="" width="#GET{largeur}" height="#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340}" /></div>]
 						<div class="h2" tabindex="-1"><span class="titre-actus">#TITRE</span>
 							<svg class="svg-icon"><use xlink:href="#CHEMIN{images/icones/picto-defs.svg}#icon-arrow-right2"></use></svg></div>
 					</a>
@@ -100,7 +100,7 @@
 			<BOUCLE_DernierEvenementArticle(ARTICLES){id_article}>
 				<div class="content-actus #EDIT{titre}<BOUCLE_RubriqueColoreeactus(HIERARCHIE){id_rubrique}{tout}{type_mot=_CouleurRubrique}{inverse} {0,1}><BOUCLE_CouleurRubriqueactus(MOTS){id_rubrique}{type=_CouleurRubrique}{0,1}> couleurrubrique#ID_MOT</BOUCLE_CouleurRubriqueactus></BOUCLE_RubriqueColoreeactus>">
 					<a href="#URL_ARTICLE"[ title="(#DESCRIPTIF|supprimer_tags|attribut_html)"]>
-						[<img src="(#LOGO_EVENEMENT_NORMAL|sinon{#LOGO_ARTICLE_SURVOL}|sinon{#LOGO_ARTICLE_NORMAL}|sinon{#LOGO_RUBRIQUE_NORMAL}|sinon{#CHEMIN{images/placeholder.jpg}}|image_focus{308,[(#CONFIG{soyezcreateurs/nombres_agenda_par_bloc,2}|=={1}|?{#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340},108})]}|extraire_attribut{src})" alt="" width="308" height="[(#CONFIG{soyezcreateurs/nombres_agenda_par_bloc,2}|=={1}|?{#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340},108})]" />]
+						[<div class="img-hover-zoom"><img src="(#LOGO_EVENEMENT_NORMAL|sinon{#LOGO_ARTICLE_SURVOL}|sinon{#LOGO_ARTICLE_NORMAL}|sinon{#LOGO_RUBRIQUE_NORMAL}|sinon{#CHEMIN{images/placeholder.jpg}}|image_focus{308,[(#CONFIG{soyezcreateurs/nombres_agenda_par_bloc,2}|=={1}|?{#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340},108})]}|extraire_attribut{src})" alt="" width="308" height="[(#CONFIG{soyezcreateurs/nombres_agenda_par_bloc,2}|=={1}|?{#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340},108})]" /></div>]
 						<div class="agenda flexbox-flex">
 							<div class="date debutfin[(#CONFIG{soyezcreateurs/agenda_date_format,complete}|=={complete}|oui)[ (#HORAIRE|=={oui}|?{horaires,[(#_AgendaDerniersAjouts:DATE_DEBUT|affdate{Ymd}|!={#_AgendaDerniersAjouts:DATE_FIN|affdate{Ymd}}|oui|?{journees,journee})]})]][(#CONFIG{soyezcreateurs/agenda_date_format,complete}|=={complete}|non)journee]" itemscope itemtype="https://schema.org/Event">
 								<time class="debut ladate" itemprop="startDate" title="#_AgendaDerniersAjouts:DATE_DEBUT" datetime="#_AgendaDerniersAjouts:DATE_DEBUT">
@@ -164,7 +164,7 @@
 			<div class="grid-item[ grid-item-x(#GET{facteur})]">
 				<div class="content-actus quoideneuf #EDIT{titre}<BOUCLE_RubriqueColoree(HIERARCHIE){id_rubrique}{tout}{type_mot=_CouleurRubrique}{inverse} {0,1}><BOUCLE_CouleurRubrique(MOTS){id_rubrique}{type=_CouleurRubrique}{0,1}> couleurrubrique#ID_MOT</BOUCLE_CouleurRubrique></BOUCLE_RubriqueColoree>">
 					<a href="#URL_ARTICLE"[ title="(#DESCRIPTIF|supprimer_tags|attribut_html)"]>
-						[<img src="(#GET{logo}|image_focus{#GET{largeur},#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340}}|extraire_attribut{src})" alt="" width="#GET{largeur}" height="#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340}" />]
+						[<div class="img-hover-zoom"><img src="(#GET{logo}|image_focus{#GET{largeur},#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340}}|extraire_attribut{src})" alt="" width="#GET{largeur}" height="#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340}" /></div>]
 						<div class="h2" tabindex="-1"><span class="titre-actus">#TITRE</span>
 							<svg class="svg-icon"><use xlink:href="#CHEMIN{images/icones/picto-defs.svg}#icon-arrow-right2"></use></svg></div>
 					</a>

stylessoyezcreateurs.css.html

@@ -3660,6 +3660,22 @@ dialog {
 	height: [(#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340})]px;
 	object-fit: cover;
 }
+/* [1] The container */
+.img-hover-zoom {
+  /*height: 300px; /* [1.1] Set it as per your need */
+  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
+}
+
+/* [2] Transition property for smooth transformation of images */
+.img-hover-zoom img {
+  transition: transform .5s ease;
+}
+
+/* [3] Finally, transforming the image when container gets hovered */
+a:hover .img-hover-zoom img {
+  transform: scale(1.1);
+}
+
 .grid-item {
   margin-bottom: 20px;
 }