Get stacked divs to stick to the bottom with CSS Grid

Question

In the following layout, I'm trying to get my content, when hovered over, to stay bottom-aligned in the overall box, so that the words "HEADLINE" and "Subhead" stay where they are and the revealed <ul> just "sits on top" of it. I'm wrapping my head around CSS Grid as best I can - but I am at a loss.

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

(I do want the .content box to be full height of the container on rollover, turning the entire image red.)

Additionally... I can't get the hover transition to go slower with "transition: 1s;" regardless of which element I place that rule on.

Thanks for any help or suggestions!

Answer 1

I tried your code snippet and i did refactor it. Removed unnecessary html tags and changed some style options.

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