时间戳

首页 > 解决方案 > 奇怪的 CSS 图像悬停

css - 奇怪的 CSS 图像悬停

问题描述

我正在 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;on&_container给出project_content: opacity: 1;。然后它还用 对背景图像进行了模糊处理opacity: .2;，达到了效果transition;

谢谢！

标签： csssass

解决方案

我用悬停效果重写了所有内容，所以现在我使用了一个覆盖类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;
 }
}

推荐阅读