J'ouvre un nouveau sujet car le style décrit ici est dans la lignée de Gthumb+ gérant le panel de photos.
Comme indiqué par Katryne dans le fil "Style des vignettes d'album avec Bootstrap Darkroom", les vignettes mangent beaucoup moins de place qu'initialement.
La zone de légende apparaît en transition lorsqu'on passe la souris sur la vignette.

Voici la base de travail :

.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(0,0,0,0.4);
  -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(0,0,0,0.4);
  -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(0,0,0,0.8);
}
.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;
}

Ce code reste à optimiser.

2 Réponse de Katryne 08-01-2025 14:43 -

Très efficace, full css et plus dans l'esprit du site de Philindy26. On profite mieux de l'image, plus dégagée. Couleurs aisément adaptables à celles des différents sites. Pour mon site principal, il faudra que j'ajuste la hauteur du bandeau, car j'ai parfois des titres bavards qui se mettent sur 2 lignes.

WWW

3 Réponse de Polowigo 08-01-2025 19:37 -

Je suis passé à 52px avec la police d'origine.