Carte de film d'animation avec HTML et CSS

Les composants interactifs sont essentiels dans la conception Web moderne. Ce blog vous guidera dans la création d'une carte de film élégante et animée en utilisant HTML et CSS. Bien que vous soyez débutant ou (développeur intermédiaire), ce projet est parfait pour mettre en pratique vos compétences front-end.

Commençons !

Étape 1 : Configuration des fichiers

Commençons par créer la structure de base du projet. Nous aurons besoin d'un fichier HTML pour le contenu et d'un fichier CSS pour le style.

Étape 2 : HTML

Voici la structure de base de notre carte de film. Chaque carte comprend :

• Une image d'affiche de film.
• Une superposition de zone de titre.
• Le nom du film affiché de manière interactive au survol.

<div>



<p>Step 3: CSS</p>

<p>Now let’s style the page to make it visually appealing and interactive. We’ll focus on the layout, hover effects, and overall aesthetics.</p>

<p><strong>Basic Page Styling</strong></p>

<p>We begin with some global styles to center the content and set the background theme.<br>
</p>

<pre class="brush:php;toolbar:false">@import url("https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap");

body {
  display: grid;
  height: 100vh;
  place-items: center;
  font-family: "Noto Sans", sans-serif;
  background: #282634;
}

CSS principal : ce CSS gère la mise en page et l'animation de chaque carte de film.

.content__shows {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.content__shows div {
  position: relative;
  width: 200px;
  border-radius: 4px;
  overflow: hidden;
  margin: 0 auto;
}
.content__shows div:hover img {
  transform: scale(1.15);
}
.content__shows div .title-box {
  content: "";
  height: 100px;
  position: absolute;
  transform: translatey(50px);
  transition: 0.3s ease;
  left: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), black);
  width: 100%;
  z-index: 1;
}
.content__shows div img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  transition: 0.3s ease;
}
.content__shows div .name {
  position: absolute;
  width: 100%;
  bottom: 10px;
  color: #fff;
  transform: translatey(50px);
  padding: 10px;
  z-index: 10;
  transition: .3s ease;
  cursor: default;
}
.content__shows div:hover .name,
.content__shows div:hover .title-box {
  transform: translatey(0);
}

Voici le codepen pour ce projet

Conclusion

Nous avons créé avec succès une carte de film animée en utilisant HTML et CSS. Ce concept peut également être utilisé pour présenter des projets, des produits ou tout ce que vous souhaitez mettre en valeur.

Merci d'avoir lu ! ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!