Películas de tarjetas CSS 3D puras

1478 AmirAliAkrami

Abrir en el editor Video Publica tu código

Recomendado

20 April 2025

Un código de Metehan

18 August 2024

Galería de sitios con efecto de desplazamiento y desenfoque

27 November 2024

Sitio web de portafolio completo

HTML

CSS

.card {
  width: calc(300px / 1.5);
  height: 300px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 0 36px;
  perspective: 2500px;
    margin-left: 15px;
    margin-bottom: 8px;
}
.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.wrapper {
  transition: all 0.5s;
  position: absolute;
  width: 100%;
  z-index: -1;
}
.wrapper::before,
.wrapper::after {
  content: "";
  opacity: 0;
  width: 100%;
  height: 80px;
  transition: all 0.5s;
  position: absolute;
  left: 0;
}
.wrapper::before {
  top: 0;
  height: 100%;
  background-image: linear-gradient(
    to top,
    transparent 46%,
    rgba(12, 13, 19, 0.5) 68%,
    rgba(12, 13, 19) 97%
  );
}
.wrapper::after {
  bottom: 0;
  opacity: 1;
  background-image: linear-gradient(
    to bottom,
    transparent 46%,
    rgba(12, 13, 19, 0.5) 68%,
    rgba(12, 13, 19) 97%
  );
}
.card:hover .wrapper::before,
.wrapper::after {
  opacity: 1;
}
.card:hover .wrapper::after {
  height: 120px;
}
.title {
  width: 100%;
  transition: transform 0.5s;
}
.card:hover .title {
  transform: translate3d(0%, -50px, 100px);
}
.character {
    height: 285px;
  opacity: 0;
  transition: all 0.5s;
  position: absolute;
  z-index: -1;
}
.card:hover .character {
  opacity: 1;
  transform: translate3d(0%, -2%, 100px);
}
.bartar-seton {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
    padding: 150px 0 27px;
}

Recomendado

Un código de Metehan

Galería de sitios con efecto de desplazamiento y desenfoque

Sitio web de portafolio completo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS