Piwigo.org

Katryne · 2025-01-12 14:21:10

Bonjour,
Le 3 janvier, Philindy26 a présenté ses compliments à l'équipe de Piwigo et a donné un lien vers son site https://photos-dromoises.fr/albumpiwigo/ . J'ai dit que je voulais pareil pour les titres de mes vignettes d'album, mes complices de toujours, Dreamer et Polowigo, ont fait des tas de suggestions, j'ai répondu que oui, que mais .... Bref, on a envahi le fil de Philindy26. C'est pas bien, je le ferai plus.

Alors avec Polowigo, on a transporté ailleurs notre laboratoire et on a fait des expériences. Enfin, surtout lui, moi je me suis contentée de mettre en œuvre. Ce qui m'intéressait, c'était le principe d'une vignette au background semi transparent, et qui perd sa transparence au survol. Le défi, c'est que le site de Philindy26 est fabriqué avec Modus, le mien avec BootstrapDarkroom, (pas les mêmes sélecteurs donc), que les couleurs de base ne sont pas les mêmes et que parfois, j'ai des titres d'album sur 2 lignes.

Polowigo a ajouté un effet de transition entre "repos" et "hover" . Voilà ce que ça donne au final, quoique j'hésite encore à mettre plus de transparence "au repos" :
https://album.chauvigne.info/

Et voilà le code de Polowigo posé dans Local Files Editor :

Code:

 .card-title,.card-title a, .card-footer {font-family: 'Raleway';color:white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;}
.card-thumbnail {
  overflow: hidden;
}
.card-thumbnail .card-body {
  position:absolute;
  bottom: -14px;
  width: 100%;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  height: 62px;
  line-height: 1;
  background:rgba(38,41,111,0.6);
  -webkit-transition:all 200ms ease-out;
  -moz-transition:all 200ms ease-out;
  -ms-transition:all 200ms ease-out;
  -o-transition:all 200ms ease-out;
  transition:all 200ms ease-out;
}
.card-thumbnail .card-footer {
  position:absolute;
  bottom: -42px;
  width: 100%;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  height: 28px;
  line-height: 1;
  background:rgba(38,41,111,0.6);
  -webkit-transition:all 200ms ease-out;
  -moz-transition:all 200ms ease-out;
  -ms-transition:all 200ms ease-out;
  -o-transition:all 200ms ease-out;
  transition:all 200ms ease-out;
}

.card-thumbnail:hover .card-body, .card-thumbnail:hover .card-footer {
  background:rgba(38,41,111,0.7);
}
.card-thumbnail:hover a, .card-thumbnail:hover .card-footer > .ellipsis {
  color: #fff;
}
.card-thumbnail:hover .card-body {
  bottom:28px;
}
.card-thumbnail:hover .card-footer {
  bottom:0;color:white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

Merci les amis.

dreamer · 2025-01-12 15:20:02

Salut voisine

Perso, je trouve que c'est plutôt réussie ta présentation !!

Bravo

polowigo · 2025-01-12 18:57:44

De rien Katryne,

J'ai testé une transparence de 0.5 histoire de voir si HISTOIRE(S) était encore lisible et c'est plutôt pas mal.
Au-delà, on finit par perdre l'apparence bleue, ce qui est dommage.

Katryne · 2025-01-13 10:39:26

C'est plus mieux joli avec 0.5 pour la transparence. Merci.

Piwigo.org

Annonce

#1 2025-01-12 14:21:10

Style des vignettes d'album

Code:

#2 2025-01-12 15:20:02

Re: Style des vignettes d'album

#3 2025-01-12 18:57:44

Re: Style des vignettes d'album

#4 2025-01-13 10:39:26

Re: Style des vignettes d'album

Pied de page des forums