Get stacked divs to stick to the bottom with CSS Grid - css

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