html - 当我将鼠标悬停在图像上时动画不工作

Question

我正在尝试向图像上的右侧动画添加扫掠，这样当您将鼠标悬停在图像上时，它会向右扫掠并在悬停时显示文本。我只是用按钮找到它才能工作，但我不知道如何去做。到目前为止，这是我的代码:

.portfolio-box {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.portfolio-box img {
  width: 300px; /*changed this from 100% for the q*/
  height:auto;
  /*object-fit: contain;*/
}

.portfolio-mask {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  background: #060606;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.5s ease-out;
}

.portfolio-mask:hover:after {
  transform: scaleX(1);
}

.portfolio-mask:hover {
  opacity: .85;
  color: white;
}

<div class="portfolio-box">
  <img src="https://upload.wikimedia.org/wikipedia/commons/4/45/A_small_cup_of_coffee.JPG" alt="Coffee">
  <div class="portfolio-mask">
    <p class="portfolio-text">Design Mock up</p>
  </div>
</div>

Answer 1

我对您的 CSS 进行了一些更改，以使其在您将鼠标悬停在图像左侧时流畅且不会疯狂跳跃。这是 CSS，下面是对更改内容和更改原因的说明。

.portfolio-box {
    position: relative;
    overflow: hidden;
    display: inline-block;
    z-index: 1;
}

.portfolio-box img {
    width: 300px; /*changed this from 100% for the q*/
    height:auto;
    transition: all 0.5s ease-out;
    display: block;
    /*object-fit: contain;*/
}

.portfolio-mask {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    background: #060606;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: all 0.5s ease-out;
}

.portfolio-box:hover .portfolio-mask {
    transform: scaleX(1);
    opacity: .85;
    color: white;
}

我所做的更改:

1. 为 .portfolio-box 添加了 display: inline-block; - 使其与内部图像一样大。
2. 为图片添加了 display: block; 以防止内联显示时图片下方有 2-3 像素的空白空间(默认)。
3. 为图像添加了transition: all 0.5s ease-out;，以防止在改变位置时跳跃。
4. 我将过渡从 transform 更改为 all 以动画化蒙版容器的移动和不透明度。
5. 现在为悬停在 .portfolio-box 上添加了动画，因为它是静态容器，这对于您想要实现的效果非常重要 - 如果您在图像悬停上添加动画，那么您将获得无限动画，因为当你将鼠标悬停在图像上方时，它会向右滑动，然后它不再悬停，所以它会回到初始状态，然后它会再次悬停，所以它会向右移动。 .. 重复初始化 ;)