css - 卡片悬停推到顶部效果
问题描述
嗨,我试图在我的文本中推动顶部,我使用了 opacity: 0 并且当它悬停时我使用填充底部但是当这个隐藏文本的高度很高时我会遇到这个问题,因为它将继续占用这个空间,因为它不与显示没有我无法解决这个问题:
但我需要我的文本位于 div 的末尾,如下所示:
它不会从我的 div 末尾开始,因为即使不透明度为 0,我的文本仍然存在
代码:
<TestingLive isHover={hoveredCards.card1}>
<div
className="a"
onMouseOver={() => updateHoveredCards("card1", true)}
onMouseOut={() => updateHoveredCards("card1", false)}
>
<div className="content-header">
<p className="text-title">testing</p>
<h3 className="content-text" style={{ color: "#fff" }}>
testing
</h3>
<p className="date-text" style={{ color: "#fff" }}>
<span>a</span>
10 de dezembro de 2020
</p>
<p className="content-spoiler">
show this text bottom on hover show this text bottom on hover show
this text bottom on hover show this text bottom on hover
</p>
</div>
</div>
</TestingLive>
CSS:
const TestingLive = styled.div`
display: grid;
grid-template-areas:
"a b c"
"a d e";
grid-gap: 4px;
grid-template-columns: 40vw 1fr 1fr;
height: 100%;
max-height: 60vh;
min-height: 60vh;
padding: 0 20px;}
& > div {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 20px 20px;
justify-content: flex-end;
position: relative;
-webkit-box-shadow: inset -200px -200px 5px 500px rgba(0, 0, 0, 0.32);
-moz-box-shadow: inset -200px -200px 5px 500px rgba(0, 0, 0, 0.32);
box-shadow: inset -200px -200px 5px 500px rgba(0, 0, 0, 0.32);
background-position: center center;
background-size: cover;
border-radius: 5px;
background-image: url("https://www.cronosolucoes.com.br/wp-content/uploads/2018/10/futuristic-technology-background-hd-overlay-115379004773cf6twdsmd.png");
cursor: pointer;
}
& .a {
grid-area: a;
}
& .content-header {
transition: all 0.3s ease;
${({ isHover }) =>
isHover &&
`
`}
}
& .content-spoiler {
max-width: 300px;
transition: all 0.3s ease;
opacity: 0;
color: white;
display:none;
${({ isHover }) =>
isHover &&
`
transition: all 0.3s ease;
opacity:1;
padding-bottom:20px;
`}
margin-top:10px;
}
& .text-title {
border-radius: 5px;
font-family: "Roboto", sans-serif;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
display: inline-block;
margin: 0 0 5px 0;
padding: 3px 7px;
line-height: 13px;
pointer-events: auto;
background-position: top center;
background: linear-gradient(-45deg, #009ffd, #2a2a72);
animation: ${HeaderKeyFrame} 5s ease infinite;
background-size: 150% 100%;
color: #fff;
}
& .content-text {
max-width: 300px;
text-align: left;
font-size: 1.07692308rem !important;
font-family: Roboto Slab, serif;
font-weight: 400;
}
& .date-text {
max-width: 250px;
text-align: left;
margin-top: 10px;
font-size: 0.6692308rem !important;
font-family: sans-serif, serif;
letter-spacing: 0.1em;
font-weight: 400;
& > span {
margin-right: 5px;
}
}
`;
例子:
解决方案
推荐阅读
- php - 执行“php artisan key:generate”时出现错误“无法加载动态库'mcrypt'”
- java - java通过排除元素将一个列表拆分为多个列表
- c# - Google Firestore 获取数据库实例时出错
- google-chrome - Chrome 调试器模拟内存限制
- r - 修复 R 中邮政编码到县转换的数据集
- excel - 根据另一个日期单元格删除单元格
- datagrid - 复杂对象的 Blazorise Datagrid 内联编辑
- javascript - 如何在laravel循环中添加javascript
- ios - SwiftUI 错误:无法转换“UIImage”类型的值?关闭结果类型“无效”
- visual-studio-code - 我可以在 VS Code difftool 模式下突出显示字符吗?