正文 

当前位置： 首页 > 知识 >

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

     2023-03-06     124

关键词：

【中文标题】如何在悬停时将过渡速度应用于缩放图像？【英文标题】：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>

【讨论】：

尝试使用 html 和 css 获得鼠标悬停缩放过渡效果，但图像溢出，图像的位置正在改变

】尝试使用html和css获得鼠标悬停缩放过渡效果，但图像溢出，图像的位置正在改变【英文标题】：Tryingtogetamousehoverzoomtransistioneffectusinghtmlandcssbutimageisgettingoverflowed,theimagespositionaregettingaltered【发布时间】：2020-05-1414:38:14【问题... 查看详情

如何使用css在鼠标悬停时缩放图像？

...标悬停效果。使用JavaScript使用CSS在本文中，我们将看到如何使用CSS来实现这种效果。本文包含两部分代码。第一部分包含HTML代码，第二部分包含CSS代码。HTML代码：在本文中，我们将使用HTML创建悬停效果时图像缩放的基 查看详情

如何在将 css 应用于图像时将图像与 a 标签链接？

】如何在将css应用于图像时将图像与a标签链接？【英文标题】：HowdoIlinkimageswithanatagwhileapplyingcsstotheimages?【发布时间】：2021-03-1518:46:30【问题描述】：我正在尝试将我的图片链接到他们相应的网站，因此我将我的图片添加到了&a... 查看详情

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

...已经能够将鼠标悬停在文本上并更改其颜色。但我不知道如何让每个链接悬停在不同的图像上。<!DOCTYPEhtml><head> 查看详情

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

...版本34（系统：Windows7，屏幕宽度：1600px）中遇到问题。悬停在其上后，我对缩放图像（在某些容器中）产生了影响。 查看详情

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

】如何仅将悬停应用于X而不是圆圈【英文标题】：HowtoapplyhovertoonlytheXnotthecircle【发布时间】：2021-12-2422:32:48【问题描述】：我如何才能将悬停过渡仅应用于X而不是圆圈？如何在代码中完成？https://jsfiddle.net/c2sah0x6/只有X应该在... 查看详情

使用 CSS 在悬停图像上创建缩放效果？

】使用CSS在悬停图像上创建缩放效果？【英文标题】：CreatingaZoomEffectonanimageonhoverusingCSS?【发布时间】：2013-03-2307:54:51【问题描述】：我目前正在尝试在将鼠标悬停在我的四个图像之一上时创建缩放效果。问题是大多数示例通常... 查看详情

在鼠标悬停时将文本悬停在帖子图像上

】在鼠标悬停时将文本悬停在帖子图像上【英文标题】：Hovertextoverpostimageonmouseover【发布时间】：2015-08-0619:36:07【问题描述】：我正在使用Genesis框架在wordpress中重新设计博客。这可能是有史以来最简单的事情，但我找不到一个... 查看详情

鼠标悬停在背景图像上的过渡

】鼠标悬停在背景图像上的过渡【英文标题】：Transitiononbackgroundimageonmouseover【发布时间】：2017-12-1509:50:18【问题描述】：我想在我的链接背景上实现一个简单的过渡，即图像，这样当我悬停它时，背景图像应该会旋转一点。这... 查看详情

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

...默认情况下，图像是模糊和缩放的（带有隐藏的溢出），悬停时它将消除模糊和缩放。但是，当我在元素上使用CSS过渡时，它会在过渡期间暂时显示溢出。http://jsfid 查看详情

在外部 div 悬停时将样式应用于内部 div [重复]

】在外部div悬停时将样式应用于内部div[重复]【英文标题】：applyingstyletoinnerdivonhoverofouterdiv[duplicate]【发布时间】：2013-12-1601:55:32【问题描述】：我有一些看起来像这样的HTML：<divclass="TheOuterClass"><divclass="TheInnerClass">somet... 查看详情

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

】CSS如何在悬停时从白色过渡到背景【英文标题】：CSSHowtoTransitionfromWhitetoBackgroundonHover【发布时间】：2012-12-0509:13:34【问题描述】：我正在尝试创建从白色背景到图像背景的过渡。这样，当查看器将鼠标悬停在某个部分上时，... 查看详情

OpenCV如何在使用单个静态图像时将速度矢量绘制为箭头

】OpenCV如何在使用单个静态图像时将速度矢量绘制为箭头【英文标题】：OpenCVHowtoPlotvelocityvectorsasarrowsinusingsinglestaticimage【发布时间】：2012-04-1510:52:09【问题描述】：我正在尝试绘制速度矢量，就像在matlab中我们使用“quiver”函... 查看详情

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

】如何在导航上添加悬停过渡效果？【英文标题】：Howtoaddahovertransitioneffectonthenavigation?【发布时间】：2013-10-1220:07:34【问题描述】：我正在就特定问题提出特定问题，但我不知道该怎么做，但想将其添加到我的网站。1)当父li有... 查看详情

CSS：图像悬停过渡不适用于显示无/显示：块和图像交换

...，过渡将起作用，但悬停图像交换将分崩离析。任何想法如何解决这个 查看详情

悬停和鼠标速度上的颜色过渡问题

】悬停和鼠标速度上的颜色过渡问题【英文标题】：issuewithcolortransitiononhoverandmousespeed【发布时间】：2018-12-2721:37:57【问题描述】：我在firefox和chrome上遇到颜色转换问题，具体取决于鼠标在每个元素上传递时的速度。我有一个徽... 查看详情

如何确保 CSS :hover 应用于动态添加的元素

】如何确保CSS:hover应用于动态添加的元素【英文标题】：HowtoensureCSS:hoverisappliedtodynamicallyaddedelement【发布时间】：2012-10-1817:03:55【问题描述】：我有一个脚本，当您将鼠标悬停在缩略图上时，它会在缩略图上动态添加完整图像。... 查看详情

如何在 jQuery 中截获不透明过渡？

】如何在jQuery中截获不透明过渡？【英文标题】：HowdoIinterceptanopacitytransitioninjQuery?【发布时间】：2011-12-1305:51:27【问题描述】：我有以下悬停脚本适用于我的导航链接图像：$("nava").hover(function()$(".current",this).animate(opacity:1,duration... 查看详情