/* css/effects.css (FULL FILE) */
.quad{
  position: relative;
}

.quad::after{
  content: attr(data-label);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .3px;

  color: rgba(255,255,255,.92);
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;

  transition: opacity 160ms ease, transform 160ms ease;
}

@media (hover: hover) and (pointer: fine){
  .quad:hover::after,
  .quad:focus-visible::after{
    opacity: 1;
    transform: translateY(0);
  }
}

.quad.is-active::after{
  opacity: 1;
  transform: translateY(0);
}