Pure CSS card movies 3D

Open In Editor Publish Your Code

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;
}

Pure CSS card movies 3D

Recommended

CSS Pixel Animation Container

CSS Loading Animation Snippet

Visa Card Checkout Page HTML Template

HTML

CSS

JS

Recommended

CSS Pixel Animation Container

CSS Loading Animation Snippet

Visa Card Checkout Page HTML Template

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS