diff --git a/noisettes/sommaire_modeportailcognac_cycloshow.html b/noisettes/sommaire_modeportailcognac_cycloshow.html index 9c0c5168cf872cff434ff2693b58b5c5d8e01797..8f0c1ce0c98d0559fce147af5a344408782d99e1 100644 --- a/noisettes/sommaire_modeportailcognac_cycloshow.html +++ b/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>] diff --git a/noisettes/sommaire_modeportailcognac_goodies.html b/noisettes/sommaire_modeportailcognac_goodies.html index 3f5bccc8405f58f6f6a5e8705e37179cf9866b8f..09b228a287c0aaa349a7253331cc2089a1ce04af 100644 --- a/noisettes/sommaire_modeportailcognac_goodies.html +++ b/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> diff --git a/noisettes/sommaire_modeportailcognac_zoomsur.html b/noisettes/sommaire_modeportailcognac_zoomsur.html index 3ea28faacf37ec8d8fb5bc62e2d0d5d133174781..0454248c6cf52b84840581969e266086ed57c7ba 100644 --- a/noisettes/sommaire_modeportailcognac_zoomsur.html +++ b/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> diff --git a/stylessoyezcreateurs.css.html b/stylessoyezcreateurs.css.html index b92c1b6cd03750a3eeef7fbf595aa060fc46e839..1096af7805b20b88fe9aa190726f77411d10864e 100644 --- a/stylessoyezcreateurs.css.html +++ b/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;