如何修复悬停时弹出？答案

【问题标题】：How to fix popping on hover?如何修复悬停时弹出？
【发布时间】：2021-01-09 01:03:39
【问题描述】：

希望你们一切都好。如何解决图像悬停时的弹出问题？我需要它慢慢变大。正如你所看到的，大图像只是变淡了。

我附上了一个很好的例子来解释这个。

如有任何帮助，将不胜感激。谢谢美味

/*............ right-column ............*/

.right-column {
  position: absolute;
}


/*......... crossfade on buttons .........*/

#hover img {
  -o-transition: .3s;
  -ms-transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  position: absolute;
}

.nohover {
  opacity: 0;
}

a:hover .hover {
  opacity: 0;
}

a:hover .nohover {
  opacity: 1;
}


/*................ bevels ................*/

img.bevel {
  border-radius: 20px;
}

img#bevel {
  border-radius: 20px;
}


/*............. pop on hover .............*/

#pop img {
  transition: .5s ease
}

#pop img:hover {
  -webkit-transform: scale(1.15);
  -ms-transform: scale(1.15);
  transform: scale(1.15);
  transition: 0.5s ease;
}

<div class="right-column" id="pop" align="center">
  <div>
    <a id="hover" href="gallery.html"><img src="http://wizzfree.com/pix/vid0.jpg" width="120" id="bevel" class="nohover"><img src="http://wizzfree.com/pix/vid0b.jpg" width="120" id="bevel" class="hover"></a>
  </div>

【问题讨论】：

标签： html css hover css-transitions cross-fade

【解决方案1】：

只使用一张图片和 CSS filter:

.btnImg {
  display: inline-block;
  width: 120px; height: 80px;
  border-radius: 20px;
  overflow: hidden;
  transition: transform .3s;
}
.btnImg img {
  width: inherit; height: inherit;
  object-fit: cover;
  transition: filter .3s;
  transform: scale(1.05);
  filter: blur(3px);
  backface-visibility: hidden;
}
.btnImg:hover {
  transform: scale(1.16);
}
.btnImg:hover img {
  filter: blur(0);
}

<a class="btnImg" href="gallery.html">
  <img src="http://wizzfree.com/pix/vid0.jpg">
</a>

【讨论】：

感谢 Roko，您的解决方案效果很好。干得好。:)

【解决方案2】：

主要问题是缩放被应用到当前悬停的图像，由于opacity: 0在悬停时消失。

scale 转换，并且转换应适用于a#hover 下的所有图像。

注意：我已经清理了你的 CSS。除非您需要支持非常旧的浏览器，否则不需要浏览器前缀进行转换和转换。在添加前缀之前检查您的目标浏览器。

/*......... crossfade on buttons .........*/

.hover img {
  position: absolute;
  transition: all 0.5s ease;
}

.nohover {
  opacity: 0;
}

.hover:hover img {
  transform: scale(1.15);
}

.hover:hover .hover {
  opacity: 0;
}

.hover:hover .nohover {
  opacity: 1;
}

/*................ bevels ................*/

.bevel {
  border-radius: 20px;
}

<a class="hover" href="gallery.html">
  <img src="http://wizzfree.com/pix/vid0.jpg" width="120" class="nohover bevel">
  <img src="http://wizzfree.com/pix/vid0b.jpg" width="120" class="hover bevel">
</a>

如果不需要支持IE，单张图片也可以达到同样的效果，CSS blur filter:

/*......... crossfade on buttons .........*/

.hover img {
  position: absolute;
  transition: all 0.5s ease;
  filter: blur(3px);
}

.hover:hover img {
  transform: scale(1.15);
  filter: blur(0);
}

/*................ bevels ................*/

.bevel {
  border-radius: 20px;
}

<a class="hover" href="gallery.html">
  <img src="http://wizzfree.com/pix/vid0.jpg" width="120" class="bevel">
</a>

【讨论】：