(Layout) Coleccion de cintas VHS/ VHS Collection

Futurama

Molestos Alienígenas: Solo Tu Y Nadie Mas

South Park: Más grande, más largo y sin cortes

El Campeon: EL Primer Round

Ciudad De Dios

Norbit

Una Película De Miedo "Scary Movie"

Duro De Matar

Devilman: El Nacimiento

Lain

Hice un Layout usando el código del usuario Kazimir, Lo modifique para que se puedan ver VHS en ves de vinilos.
(Esta hecho para ponerlo en el apartado de "Movies")

Si quieres cambiar la tipografía por "Times New Roman", Times, serif; donde esta el comic sans

<style>
/* Vinyl Showcase - www.kazimariusz.com */

#vinyl-gallery * {
  all: unset;
}

#vinyl-gallery {
  all: initial;
  width: 100%;
  height: 300px; /* más alto para VHS grandes */
  margin: 25px 0;
  display: flex;
  flex-direction: row;
  position: relative;
  margin-left: -5px;
}

#vinyl-gallery .vinyl {
  perspective: 700px;
  width: 16px; /* lomo un poco más grueso */
  transition: width 0.5s;
}

#vinyl-gallery .vinyl:hover {
  width: 150px; /* se abre más */
}

#vinyl-gallery img {
  transition: transform 0.5s, width 0.5s, height 0.5s, margin-top 0.5s;
  width: 150px;   /* MÁS GRANDE */
  height: 240px;  /* MÁS ALTO (VHS real) */
  transform: rotateX(0deg) rotateY(25deg);
  transform-style: preserve-3d;
  transform-origin: left center;
  object-fit: cover;
}

#vinyl-gallery .vinyl:hover img {
  transform: rotateX(0deg) rotateY(5deg) scaleX(1.1) scaleY(1.07);
  width: 150px;   /* nunca más chico que el normal */
  height: 240px;
  margin-top: -8px;
}

#vinyl-gallery .title {
  display: block;
  visibility: hidden;
  position: absolute;
  bottom: 10px;
  text-align: center;
  width: 100%;
  padding-left: 6px;
  font-family: "Times New Roman", Times, serif;
  font-size: 14px;
}

#vinyl-gallery .vinyl:hover + .title {
  visibility: visible;
}
</style>

<div id="vinyl-gallery">

  <div class="vinyl">
    <img src="https://files.catbox.moe/78o6dn.png">
  </div>
  <div class="title">Futurama</div>

  <div class="vinyl">
    <img src="https://files.catbox.moe/ygh172.png">
  </div>
  <div class="title">Molestos Alienígenas: Solo Tu Y Nadie Mas</div>

  <div class="vinyl">
    <img src="https://files.catbox.moe/i64mif.png">
  </div>
  <div class="title">South Park: Más grande, más largo y sin cortes</div>

  <div class="vinyl">
    <img src="https://files.catbox.moe/2z22n8.png">
  </div>
  <div class="title">El Campeon: EL Primer Round</div>

  <div class="vinyl">
    <img src="https://files.catbox.moe/iic3fp.png">
  </div>
  <div class="title">Ciudad De Dios</div>

  <div class="vinyl">
    <img src="https://files.catbox.moe/qsql29.png">
  </div>
  <div class="title">Norbit</div>

  <div class="vinyl">
    <img src="https://files.catbox.moe/9n4vrs.png">
  </div>
  <div class="title">Una Película De Miedo "Scary Movie"</div>

  <div class="vinyl">
    <img src="https://files.catbox.moe/d75oq1.png">
  </div>
  <div class="title">Duro De Matar</div>

  <div class="vinyl">
    <img src="https://files.catbox.moe/j0xg2a.png">
  </div>
  <div class="title">Devilman: El Nacimiento</div>

  <div class="vinyl">
    <img src="https://files.catbox.moe/w1d68l.png">
  </div>
  <div class="title">Lain</div>

</div>