From ae4e042188ae9b53c4473784d7b473012bdecf1b Mon Sep 17 00:00:00 2001
From: RealET <real3t@gmail.com>
Date: Mon, 13 Nov 2023 09:42:29 +0100
Subject: [PATCH] feat : un petit effet de zoom sur les tuiles
---
noisettes/plan/inc_antichrono_grid.html | 2 +-
.../sommaire_modeportailcognac_quoideneuf.html | 8 ++++----
stylessoyezcreateurs.css.html | 16 ++++++++++++++++
3 files changed, 21 insertions(+), 5 deletions(-)
diff --git a/noisettes/plan/inc_antichrono_grid.html b/noisettes/plan/inc_antichrono_grid.html
index 51f7fc52..96eaa6dd 100644
--- a/noisettes/plan/inc_antichrono_grid.html
+++ b/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>
diff --git a/noisettes/sommaire/sommaire_modeportailcognac_quoideneuf.html b/noisettes/sommaire/sommaire_modeportailcognac_quoideneuf.html
index 18c48277..10e66d07 100644
--- a/noisettes/sommaire/sommaire_modeportailcognac_quoideneuf.html
+++ b/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>
diff --git a/stylessoyezcreateurs.css.html b/stylessoyezcreateurs.css.html
index 155d820c..79abd412 100644
--- a/stylessoyezcreateurs.css.html
+++ b/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;
}
--
GitLab