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

根据您的描述，我认为您要尝试的是transform。为此，只需将{所需大小的translateX变换添加到css中即可。

希望这会有所帮助。

.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-box img.animate:hover{
  transform: translateX(5em);
}
.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 class="animate"  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 2

我对您的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;
}

我所做的更改：

为display: inline-block;添加了.portfolio-box-使其与内部图像一样大。
为图像添加了display: block;，以防止在嵌入式显示时图像下方有2-3px的空白（默认）。
为图像添加了transition: all 0.5s ease-out;，以防止在更改位置时跳转。
我将transform到all的过渡方式设置为动画，不仅使蒙版容器移动而且使蒙版容器不透明。
现在为.portfolio-box上的鼠标悬停添加了动画，因为它是静态容器，这对于要实现的效果非常重要-如果在图像悬停上添加动画，则将获得无限的动画，因为当您将鼠标悬停在图像上方，然后将其向右滑动，之后将不再悬停，因此它将返回到初始状态，然后再次将其悬停因此将其移到右边...重复初始化;）

当我将鼠标悬停在图片上时，动画不起作用

2 个答案: