使用CSS网格获得堆叠的div以贴近底部 [英] Get stacked divs to stick to the bottom with CSS Grid

问题描述

在下面的布局中，当我将鼠标悬停在上时，我试图使内容在整个框中保持底部对齐，以便单词和副标题保持在它们所在的位置，而显示的<ul>仅位于其顶部。我正在尽我所能地处理CSS网格--但我不知所措。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

.programbox {
  display: grid;
  grid-template-areas: 'item';
  align-content: end;
  justify-content: stretch;
  height: 300px;
  width: 700px;
  background-image: url(https://heroshockey.com/wp2021/wp-content/uploads/2021/07/program-billboards-future-stars.jpg);
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
}

.programbox::before {
  content: '';
  grid-area: item;
  background-color: red;
  mix-blend-mode: multiply;
}

.content {
  grid-area: item;
  isolation: isolate;
  color: white;
  align-self: end;
}

.details {
  display: none;
}

h1,
p {
  margin: 0;
  padding: 10px;
}

.programbox:hover .content {
  height: 300px;
}

.programbox:hover .details {
  display: inherit;
}

<div class="programbox">

  <div class="content">

    <div class="details">
      <ul>
        <li>Grades 4 – 8, participants referred by partner schools or social services agencies</li>
        <li>Weekly on-ice practices</li>
        <li>Learn on-ice skills, confidence building, equipment care</li>
        <li>Intro to mentoring relationships with volunteers &amp; HEROS All Stars</li>
      </ul>
    </div>

    <h1 class="header">HEADLINE</h1>
    <div class="description">
      <p>Subhead</p>
    </div>

  </div>

</div>

(我确实希望.content框在鼠标悬停时达到容器的完全高度，从而将整个图像变为红色。)

此外...无论我将该规则放在哪个元素上，都无法使"transition: 1s;"的悬停过渡变得更慢。

感谢您的帮助或建议！

推荐答案

我尝试了您的代码片段，并进行了重构。删除了不必要的html标记并更改了一些样式选项。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

.programbox {
  height: 300px;
  width: 700px;
  background-image: url(https://heroshockey.com/wp2021/wp-content/uploads/2021/07/program-billboards-future-stars.jpg);
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

.programbox::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: red;
  mix-blend-mode: multiply;
  transition: all 1s ease-in-out;
  transform: translateY(73%);
}
.programbox:hover::before {
  transform: translateY(0%);
}

.content {
  height: 100%;
  display: grid;
  grid-template-rows: 1fr repeat(2, 35px);
  overflow: hidden;
  isolation: isolate;
  color: white;
}

h1,
p,
li {
  line-height: 1;
}
.header {
  grid-row: 2;
}
.description {
  grid-row: 3;
}
.details {
  grid-row: 1;
}

.header,
.description {
  margin: 0;
  padding: 0 10px;
  align-self: flex-start;
}

.details {
  transform: translateY(100px);
  opacity: 0;
  user-select: none;
  transition: all 0.5s ease-in-out;
}
.programbox:hover .details {
  transform: translateY(0);
  opacity: 1;
  user-select: auto;
  transition: all 1.5s ease-in-out;
}

<div class="programbox">
      <div class="content">
        <h1 class="header">HEADLINE</h1>
        <p class="description">Subhead</p>
        <ul class="details">
          <li>
            Grades 4 – 8, participants referred by partner schools or social
            services agencies
          </li>
          <li>Weekly on-ice practices</li>
          <li>Learn on-ice skills, confidence building, equipment care</li>
          <li>
            Intro to mentoring relationships with volunteers HEROS All Stars
          </li>
        </ul>
      </div>
    </div>

这篇关于使用CSS网格获得堆叠的div以贴近底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！