Animated Movie Card w/ HTML and CSS

Interactive components are essential in modern web design. This blog will guide you through creating a stylish and animated movie card using HTML and CSS. Although you're a beginner, or (an intermediate developer), this project is perfect for practising your front-end skills.

Let's get started!

Step 1: Setting up files

Let's start by creating the basic project structure. We’ll need an HTML file for the content and a CSS file for styling.

Step 2: HTML

Here’s the basic structure of our movie card. Each card includes:

• A movie poster image.
• A title box overlay.
• The name of the movie displayed interactively on hover.

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

Main CSS: This CSS handles the layout and animation of each movie card.

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

Here is the codepen for this project

Conclusion

We’ve successfully created an animated movie card using HTML and CSS. This concept can also be used to showcase projects, products, or anything you want to highlight.

Thanks for reading! ?

The above is the detailed content of Animated Movie Card w/ HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!