Странное CSS-изображение при наведении

Question

Я создаю эффект наведения на изображение с помощью SCSS на сайте WordPress (см. 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;
 }
}