如何在悬停时将过渡速度应用于缩放图像？

Posted

技术标签:

【中文标题】如何在悬停时将过渡速度应用于缩放图像？【英文标题】：How to apply a transition speed to a scaled image on hover? 【发布时间】：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" >
    <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" >
        </a>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

我已将悬停从 0.2s 更改为 0.1s 并为我工作。 这与图标无关。这是关于卡片顶部的图像。我也对此应用了过渡，但它没有按预期运行。 问题是关于被缩放的图像。图标没有被缩放，只有照片被缩放。 img 上的过渡似乎对我有用，它只是设置为五分之一秒，所以不需要很长时间。您能多描述一下您希望它在过渡时的样子吗？ 尝试对其应用 3 秒计时。它不起作用。 【参考方案1】：

更改 img 上的过渡确实有效。但当然，我们需要确保选择正确的图像。

可以选择可缩放的 img 并在此样式中更改过渡：

.next__card img 
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  transition: transform 3s; /* changed from .2s */

这是改变后的 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 3s;
  /* changed from .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" >
    <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" >
        </a>
      </div>
    </div>
  </div>
</div>

更新：如果要求 img 不仅可以缩放，还需要“突破”其父级，以便在不裁剪的情况下全部看到，然后让父级溢出可见。

这是修改后的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 
  overflow: visible;


.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 3s;
  /* changed from .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" >
    <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" >
        </a>
      </div>
    </div>
  </div>
</div>

【讨论】：

以上是关于如何在悬停时将过渡速度应用于缩放图像？的主要内容，如果未能解决你的问题，请参考以下文章

Firefox中带有缩放变换的CSS过渡效果后的图像移动/跳跃

在悬停时将文本链接转换为图像

如何仅将悬停应用于 X 而不是圆圈

CSS如何在悬停时从白色过渡到背景

如何在导航上添加悬停过渡效果？

图像边界半径在 css 过渡期间不起作用