Carte animée avec effet de survol 3D

1917 Andev.web

Ouvrir dans l'éditeur Publiez votre code Precisa de um site?

Recommandé

14 January 2025

Exemple de page Web de portfolio

6 November 2024

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

Carte animée avec effet de survol 3D

Recommandé

Exemple de page Web de portfolio

Effet de texte 3D

floraison de données

HTML

CSS

JS

Recommandé

Exemple de page Web de portfolio

Effet de texte 3D

floraison de données

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS