Question

我正在WordPress网站上使用SCSS在图像上创建悬停效果（请参见gif：https://gyazo.com/1a35247e40d74b5fc756d508de4231eb）

如您所见，将图像悬停在图像上后会出现“变形”，可能是ease-in属性错误，或者我没有正确执行悬停效果。我想知道当它表现为这样时，我在代码中做错了什么。

这是有效的代码：

（省去了一些SCSS，因为它很浪费，但是&用于使用父类）

编辑：HTML和SCSS

<div class="project_container">
    <div class="project_content">
      Test event
      <br>
      2018
    </div>
    <img src="http://testsite.com/wp-content/uploads/2018/12/img.jpg" class="attachment-full aligncenter">
</div>

-

&_container {
position: relative;
height: 300px;
width: 300px;

&:hover {
  & > img {
    opacity: .2;
  }

  & > .project_content {
    opacity: 1;
  }
}

& img {
  position: absolute;
  width: 100%;
  height: 100%;

  /*
  object-fit: none;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  */

  // Hover tranisiton
  transition: opacity .5s;
 }
}


&_content {
 opacity: 0;
 transition: opacity .5s;

// Center Position
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);

 color: $purple;
 z-index: 2;
 text-transform: uppercase;
 font-size: 20px;
 font-weight: 500;
 text-align: center;
 }
}

因此，在:hover;上使用&_container将得到project_content：opacity: 1;。然后，它也用opacity: .2;模糊背景图像，并用transition;

达到效果。

谢谢！

Answer 1

我使用悬浮效果重写了所有内容，因此现在我使用上面带有opacity: 0;的覆盖类（以及一个过渡，它会处理:hover上的效果）

这是HTML的简单版本：

<div class="project_container">
  <div class="project_content">
   <p>Content</p> 
  </div>
  <img src="#" alt="test">
  <div class="project_overlay"></div>
</div>

和简化的SCSS：

.project {
 &_container {
  position: relative;
  height: 300px;
  width: 300px;

  &:hover .project_overlay,
  &:hover .project_content {
   opacity: 1;
   transition: opacity .5s;
  }
 }

 & img {
  position: absolute;
  width: 100%;
  height: 100%;
 }

 &_overlay {
  background-color: rgba(255, 255, 255, .5);
  position: absolute;
  height: 100%;
  width: 100%;

  opacity: 0;
  transition: opacity .5s;
 }
}

奇怪的CSS图像悬停

1 个答案: