L'Agora sur Chronica – css filter

Re: css filter

null@example.com (Katryne) — Wed, 18 Feb 2026 14:42:29 +0000

Mémo : le plugin Super Zoom annule l'effet filter quand il est activé sur img, mais c'est bon avec le css filter en hover.

Re: css filter

null@example.com (Katryne) — Wed, 18 Feb 2026 12:16:49 +0000

Un piwigiste trouvait que ses photos de nuit étaient trop sombres une fois téléversées sur son Piwigo, alors qu'elles étaient correctes, vues localement sur son ordinateur.
J'ai proposé une solution css sur le site en appliquant à cet album en ligne un effet filter brightness. Pour que l'effet ne porte que sur les photos d'un seul album et pas un autre, le css (que j'ai mis pour essayer dans l'onglet css du plugin Local Files Editor) est assez long pour ne cibler, dans l'exemple, que les photos de l'album 388 :

/*test filter brightness sur photos nocturnes album388*/
html > body#theCategoryPage.section-categories.category-388 > div#wrapper > div.container-fluid > div#content.content-grid.pt-3 > div#thumbnails.row > div.col-outer.col-xl-3.col-lg-4.col-md-6.col-sm-6.col-12 > div.card.card-thumbnail.path-ext-jpg.file-ext-jpg > div.h-100 > a.ripple > img.card-img-top.thumb-img,
html > body#thePicturePage.section-categories.category-388.image-0 > div#wrapper > div#main-picture-container.container-fluid > div#theImage.row.d-block.justify-content-center.mb-3 > img#theMainImage.path-ext-jpg.file-ext-jpg,
html > body#thePicturePage.section-categories.category-388.image-0 > div#wrapper > div#main-picture-container.container-fluid > div#theImage.row.d-block.justify-content-center.mb-3 > img#theMainImage.path-ext-jpg.file-ext-jpeg
{filter : brightness(130%);}

Ça marche bien, mais l'album test n'est plus en ligne.

css filter

null@example.com (Katryne) — Mon, 16 Feb 2026 20:13:10 +0000

Les effets filter en css, voir ce site : https://outils-css.aliasdmc.fr/generate … filter.php

Différents effets filter avec exemples :
Click the property values below to see the result:
filter: none;
filter: blur(5px);
filter: brightness(200%);
filter: contrast(200%);
filter: drop-shadow(8px 8px 10px gray);
filter: grayscale(100%);
filter: hue-rotate(90deg);
filter: invert(100%);
filter: opacity(30%);
filter: saturate(8);
filter: sepia(100%);
filter: contrast(200%) brightness(150%);