css实现电影海报

这个博客将指导你使用HTML和CSS创建一个时尚的动画电影海报。

让我们开始吧！

这是我们的电影卡的基本结构。每张卡包括：

• 一张电影海报。
• 标题覆盖
• 悬停时显示电影的名称

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

现在，让我们设计页面的样式，使其具有视觉吸引力和交互性。我们将集中在布局，悬停效果，和整体美学。

@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处理每张电影卡的布局和动画。

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

原文： dev.to/tilakjain12…