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 class="content__shows">
  <div><img src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/avengers/p-captmarvel.jpg" alt="Movie Poster" />
    <div class="title-box"></div>
    <div class="name">Captain Marvel</div>
  </div>
  <div><img src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/avengers/p-antmanwasp.jpg" alt="Movie Poster" />
    <div class="title-box"></div>
    <div class="name">Ant-Man and the Wasp</div>
  </div>
  <div><img src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/avengers/p-iw.jpg" alt="Movie Poster" />
    <div class="title-box"></div>
    <div class="name">Avengers: Infinity War</div>
  </div>

</div>

Step 3: CSS

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

Basic Page Styling

We begin with some global styles to center the content and set the background theme.

@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! 😊