Style des vignettes d'album avec Bootstrap Darkroom

Salut chef !

Voici un premier jet transposé du lien que tu as indiqué.
Ça n'est pas complètement satisfaisant mais c'est pour donner une idée.

.card-thumbnail .card-body, .card-thumbnail .card-footer {
  position:absolute;
  z-index:100;
  bottom:-80px;
  top:auto;
/*  height:30px; */
  left:0;
  right:0;
  padding:5px 0;
  width:100%;
  background:rgba(0,0,0,0.7);
  text-align:center;
  overflow:hidden;
  color:#aaa;
/*    -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; */
  display:none;
}
.card-thumbnail:hover .card-body {
  bottom:34px;
  display:block;
}
.card-thumbnail:hover .card-footer {
  bottom:0px;
  display:block;
}

Je n'ai pas adapté la couleur ni la transparence et j'ai laissé la police d'origine.
Le problème est que l'effet de transition ne peut pas apparaître dans ce schéma de div imbriquées et surtout qu'il faut modifier les positions (bottom) en fonction de la taille de police.

À voir si c'est améliorable.
Après il y aurait la solution de jouer sur le template mais c'est une toute autre histoire.

edit : je me demande si il ne vaudrait pas mieux partir sur un fade-in ?

Je pense pas qu'il faille un display none sur .card-thumbnail .card-footer : quand on ouvre la page, on a que des vignettes si on passe pas la souris dessus. Il lui faut un affichage avec un fond semi transparent et un unfont-weight:normal.
Alors qu'en hover, le fond serait moins transparent et le font-weight rn bold.
J'ai commencé un peu.  Mais j'ai pas compris pour la transition en douceur comme sur le site de Philindy26. Et puis, ya pas du tout de légende si on passe pas la souris dessus.

C'est chouette comme ça, j'ai juste changé color et background pour du bleu sur fond blanc. T'en penses-quoi ?

https://blackland.legtux.org/

C'est exactement ce que je voulais, un grand merci pour ta patience et ton expertise (si si si ...)
Au besoin, je densifierai un peu le background quand on n'est pas en hover.

Je pense qu'il est pertinent de publier ton code sur le forum Piwigo. Si oui, comment faire ? Peut-être un nouveau post dans la section "Styles", en reprenant ma question du départ avec le lien vers le Piwigo de https://fr.piwigo.org/forum/profile.php?id=7132 ??? Avec un lien depuis le message initial vers le nouveau dans /styles ?

Demain, je ferai ... Sur le site vivant, j'ai dû adapter, à cause des titres parfois longs qui se mettent sur 2 lignes. En hover, j'ai donné un look spécial au texte, full cs, hein, pas de js. Ça change, je ne sais pas si c'est en mieux, moi j'aime très beaucoup et les vignettes rectangulaires, moins hautes, rendent la page moins longue, parce qu'avec la carte, le nuage de mots-clefs et la liste des commentaires, ça n'en finissait plus...Voilà : https://album.chauvigne.info/

Ça n'est pas gagné : j'ai beau directiver vertical-align: middle !important;, c'est totalement inefficace.

On attend un peu avant de poster sur le "grand forum" ? Je ne suis pas sure d'avoir encore trouvé l'équilibre parfait, le contraste lisible entre les backgrounds et la couleur des textes. Tout dépend des couleurs du thème.

J'en suis là sur le site vivant : https://album.chauvigne.info/
et là sur le site de test : https://blackland.legtux.org/

Je crois que je tiens un bon compromis transparence/contraste du texte. Mais il faudra quand même choisir les phots représentantes, car je n'arrive pas à assurer partout une lisibilité acceptable. J'ai mis sur le titre un text-shadow contrasté et qui colle aux lettres.

Ce qui donne avec Bootstrap Darkroom:

 .card-title,.card-title a {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: 38px;
  line-height: 1;
  background:rgba(38,41,111,0.5);
  -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.5);
  -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;
} 

Il te faut passer la height en 52px au lieu de 38px.

Pour gagner en lisibilité, peut-être que diminuer un peu la transparence ne serait pas trop gênant. À voir.

J'en dis que c'est bien lisible maintenant.
Un poil juste pour la catégorie DOCUMENTS, il faut espérer que tu n'auras pas énormément d'images blanches.

Pas encore et, honte à moi, je n'ai même pas encore uploadé les photos des fêtes !