css - 卡片悬停效果
问题描述
我制作了一张标准卡片,顶部有图片,底部有文字内容。该图像应用了灰度和悬停效果,可以按预期工作。卡片标题具有元素缩放效果,也可以正常工作。阅读更多链接具有按我预期工作的元素后缩放效果。当悬停在卡片上的任何位置时,标题动画会按我的意愿工作,但图像效果不适用。我希望卡片悬停时应用所有效果(减去阅读更多内容)。对于我的生活,我无法弄清楚为什么这不起作用。
初级开发人员,第一次海报。要温柔。
任何帮助,将不胜感激。
.card {
background-color: #fff;
border-radius: 0.8rem;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
}
.card__image-container {
border-radius: 0.8rem 0.8rem 0 0;
overflow: hidden;
}
.card> :last-child {
margin-bottom: 0;
}
.card__image {
display: block;
aspect-ratio: 4/3;
border-radius: 0.8rem 0.8rem 0 0;
filter: grayscale(75%);
object-fit: cover;
object-position: center;
width: 100%;
@extend .transition;
}
.card__image:hover {
filter: grayscale(0%);
transform: scale(1.05);
}
.card__content-container {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 2.5rem;
}
.card__title {
display: inline-block;
font-size: 2rem;
margin-bottom: 1rem;
position: relative;
z-index: 1;
}
.card__title::after {
content: "";
position: absolute;
top: -0.25rem;
left: -2.5rem;
bottom: -0.25rem;
width: calc(100% + 1rem);
background: #999797;
z-index: -1;
transform: scalex(0.02);
transform-origin: left;
@extend .transition;
}
.card:hover .card__title::after {
transform: scalex(1);
border-radius: 0 0.8rem 0.8rem 0;
}
.card__content {
font-size: 1.8rem;
}
.card__link {
color: #999797;
position: relative;
}
.card__link::after {
background-color: #999797;
bottom: 0;
content: "";
height: 2px;
left: 0;
position: absolute;
width: 38%;
transform: scalex(0);
transform-origin: left;
@extend .transition;
}
.card__link:hover::after {
transform: scalex(1);
}
<li class="card">
<div class="card__image-container">
<img class="card__image" src="https://source.unsplash.com/random" alt="Placeholder">
</div>
<div class="card__content-container">
<h3 class="card__title">Something About Something</h3>
<p class="card__content">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic molestias eius dolor quasi.</p>
<a class="card__link" href="#">Read more</a>
</div>
<
解决方案
推荐阅读
- php - 如何在没有本地安装节点的情况下使用 PHP 为动态模块编译 vuejs
- php - HTML元素的CSS调整
- javascript - 我如何以更简洁的方式执行此代码而不会出现问题?
- swift - 在“for in”循环中初始化的计时器为每个循环触发两次
- verilog - Verilog 中的总线符号
- javascript - 我可以创建一个自定义函数并在数组 i JavaScript 上调用它吗
- java - 请帮助我了解以下用途:\0
- reactjs - 使用 react-i18next useTranslationHooks 时出现“i18next backendConnector:加载命名空间失败”
- android - 建立蓝牙连接时出错。后退
- java - 有没有办法在存储字符串时扫描文件并忽略 int 变量?