Re: Style des vignettes d'album avec Bootstrap, transition "poussée"

2025-01-08T18:37:39Z

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

Re: Style des vignettes d'album avec Bootstrap, transition "poussée"

2025-01-08T13:43:26Z

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.

Style des vignettes d'album avec Bootstrap, transition "poussée"

2025-01-07T22:55:45Z

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.

L'Agora sur Chronica – Style des vignettes d'album avec Bootstrap, transition "poussée"

Re: Style des vignettes d'album avec Bootstrap, transition "poussée"

Re: Style des vignettes d'album avec Bootstrap, transition "poussée"

Style des vignettes d'album avec Bootstrap, transition "poussée"