MediaCollectorLibary/public/css/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom styles for media cards */
.items {
  @apply flex flex-wrap;
}

.item {
  @apply m-5 w-32 h-48 overflow-hidden shadow-lg transform-gpu transition-transform duration-300 origin-top;
}

.item img {
  @apply w-full min-h-full;
}

.item figcaption {
  @apply absolute bottom-0 left-0 right-0 p-5 pb-2.5 text-xl bg-transparent text-white transform translate-y-full transition-transform duration-300;
}

.item::after {
  content: '';
  @apply absolute z-10 w-full h-full -top-9/10 -left-5 opacity-10 rotate-45 bg-gradient-to-t from-transparent via-white/15 to-white/50 transition-all duration-300;
}

.item:hover,
.item:focus,
.item:active {
  @apply shadow-2xl -translate-y-1 scale-105 rotate-x-15;
}

.item:hover figcaption,
.item:focus figcaption,
.item:active figcaption {
  @apply translate-y-0;
}

.item:hover::after,
.item:focus::after,
.item:active::after {
  @apply rotate-25 -top-2/5 opacity-15;
}

.article {
  @apply overflow-hidden w-80 h-56 m-5;
}

.article img {
  @apply w-full min-h-full transition-all duration-200;
}

.article figcaption {
  @apply absolute inset-0 p-10 text-sm text-white bg-blue-900/60 opacity-0 scale-115 transition-all duration-200 shadow-sm;
}

.article figcaption h3 {
  @apply text-blue-300 text-base mb-0 font-bold;
}

.article:hover img,
.article:focus img,
.article:active img {
  @apply blur-sm scale-95;
}

.article:hover figcaption,
.article:focus figcaption,
.article:active figcaption {
  @apply opacity-100 scale-100;
}