【发布时间】：2021-10-27 17:09:23
【问题描述】：
我在下面的 sn-p 中有一张卡片。我试图弄清楚如何在悬停时将过渡速度应用于缩放图像。我尝试过的方法不起作用。
我在卡片底部有一个箭头图标，应用了过渡速度。它工作正常。我已将图标的速度设置为不同的，以便您看到差异。
如何对悬停时缩放的照片图像应用过渡速度？（不是图标）
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
font-style: normal;
}
a {
color: #005fec;
}
a:hover {
text-decoration: underline;
}
h4 {
font-size: 1.25rem;
line-height: 1.75rem;
}
@media (min-width: 768px) {
h4 {
font-size: 1.75rem;
line-height: 2.25rem;
}
}
h4 + img {
margin-top: 3rem;
}
h6 {
font-size: 1rem;
line-height: 1.5rem;
}
.kicker {
font-size: 0.75rem;
line-height: 0.75rem;
letter-spacing: 1px;
text-transform: uppercase;
}
.kicker--bold, .kicker--bold {
font-weight: 700;
}
.img-fluid {
width: 100%;
height: auto;
}
.next__cards {
display: flex;
flex-direction: column;
max-width: 1200px;
margin: 0 auto;
}
@media (min-width: 576px) {
.next__cards {
display: flex;
flex-direction: row;
justify-content: space-between;
}
}
.next__card {
position: relative;
overflow: hidden;
box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.16);
border-radius: 4px;
margin: 0 1.5rem 2rem;
}
.next__card--link {
display: flex;
flex-flow: row wrap;
width: 1.5rem;
}
.next__card--link-spacer {
transition: all 2s ease;
}
.next__card--link:hover .next__card--link-spacer {
flex-grow: 1;
}
.next__card--link ::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
content: "";
}
@media (min-width: 576px) {
.next__card {
margin-left: 0.75rem;
margin-right: 0.75rem;
}
}
.next__card:hover {
box-shadow: 0px 8px 12px rgba(25, 30, 36, 0.08);
}
.next__card img {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
transition: transform .2s;
}
.next__card:hover img.next__card-img {
transform: scale(1.1);
transform-origin: 50% 50%;
}
@media (min-width: 576px) {
.next__card {
max-width: 50%;
}
}
.next__card-content {
padding: 2.5rem;
}
.next__card-title {
margin: 1.5rem auto 2rem;
}
.next__card .kicker, .next__card-title {
padding: 0;
}
.next__card:hover .next__card-title {
color: #005fec;
}
.next__card-footer {
width: 100%;
}
@media (min-width: 992px) {
.next__card {
max-width: 376px;
}
.next__card:first-child {
margin-left: 0;
}
.next__card:last-child {
margin-right: 0;
}
}<div class="next__cards">
<div class="next__card">
<img class="img-fluid next__card-img" src="https://www.nextiva.com/assets/jpg/case-study/xCase-Studies-Jersey-College-card.jpg.pagespeed.ic.Ai7henX86J.jpg" alt="">
<div class="next__card-content">
<h6 class="kicker kicker--bold">customer story</h6>
<h4 class="next__card-title">
See how EagleRider switched phone providers easily
</h4>
<div class="next__card-footer">
<a class="next__card--link" target="_blank" href="#">
<span class="next__card--link-spacer"></span>
<img src="https://www.nextiva.com/assets/svg/arrow-right.svg" alt="right arrow">
</a>
</div>
</div>
</div>
</div>【问题讨论】：
-
我已将悬停从
0.2s更改为0.1s并为我工作。 -
这与图标无关。这是关于卡片顶部的图像。我也对此应用了过渡，但它没有按预期运行。
-
问题是关于被缩放的图像。图标没有被缩放，只有照片被缩放。
-
img 上的过渡似乎对我有用，它只是设置为五分之一秒，所以不需要很长时间。您能多描述一下您希望它在过渡时的样子吗？
-
尝试对其应用 3 秒计时。它不起作用。
标签： css css-animations css-transitions css-transforms