Tarjeta animada con efecto de desplazamiento 3D

3,084 Andev.web

Abrir en el editor Publica tu código

Tarjeta animada con efecto de desplazamiento 3D

Recomendado

19 October 2024

Portafolio de desarrolladores HTML V2

31 January 2026

Cargador de Unity HTML5 para el juego Kindergarten 2

23 August 2025

Blog de sistemas y redes de TI | Soluciones NetCore

HTML

CSS

@font-face {
  font-family: "Exoct";
  src: url("https://assets.codepen.io/1480814/films.EXH_____.ttf")
}
figure {
  width: 100%;
  aspect-ratio: 1;
  margin: 0 0 60px;
  padding: 5px 20px 0;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: 100%;
  cursor: pointer;
  position: relative;
  filter: drop-shadow(0 0 20px rgb(0 0 0/50%));
}
figure:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: top/cover;
  transform-origin: bottom;
  filter: brightness(.9);
  transition: .5s;
}
figure:before {
  background-image: url(https://assets.codepen.io/1480814/necro-back.jpg)
}
figure + figure:before {
  background-image: url(https://assets.codepen.io/1480814/druid-bac.jpg)
}
img {
  grid-area: 1/1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  filter: contrast(.8) brightness(.7);
  place-self: end center;
  transition: .5s;
}
figcaption {
  grid-area: 1/1;
  width: calc(100% + 40px);
  font-family: Exoct;
  color: #fff;
  font-size: min(32px,5vmin);
  text-align: center;
  place-self: end center;
  transform: perspective(500px) translateY(100%) rotateX(-90deg);
  backface-visibility: hidden;
  transform-origin: top;
  background: #000;
  transition: .5s;
}
figure:hover img {
  width: 130%;
  height: 255%;
  filter: contrast(1);
}
figure:hover::before {
  filter: brightness(.3);
  transform: perspective(500px) rotateX(60deg);
}
figure:hover figcaption{
  transform: perspective(500px)translateY(100%) rotateX(-30deg);
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(230px,35vmin);
  place-content: end center;
  gap: 50px;
  background: 
    linear-gradient(#0000,rgb(50 50 50 / 88%)),
    url(https://img.redbull.com/images/q_auto,f_auto/redbullcom/2021/5/14/mkencvxlnzi4vej7c1js/muspelheim-god-of-war-mountain) top/cover;
}