使用CSS网格获得堆叠的div以贴近底部-前端问题

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

本文介绍了使用CSS网格获得堆叠的div以贴近底部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在下面的布局中，当我将鼠标悬停在上时，我试图使内容在整个框中保持底部对齐，以便单词和副标题保持在它们所在的位置，而显示的<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 & 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以贴近底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！