Weird CSS image hover - css

Question

I'm creating a hover effect on an image with SCSS on a WordPress site (see gif: https://gyazo.com/1a35247e40d74b5fc756d508de4231eb)
As you see the image gets a "distorted" after hovering over it, maybe the ease-in property is wrong, or I'm not doing the hover effect properly. I'm wondering what I'm doing wrong in the code when it behaves like this.
This is the code that is working:
(left out some SCSS because it was so wast but the & is used to use parent class)
Edit: The 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;
}
}
So using :hover; on the &_container gives the project_content: opacity: 1;. Then it also blurs the background image with the opacity: .2;, and the effect is achieved with a transition;
Thank you!

Answer 1

I rewrote everything with the hover effect so now I use an overlay class which has opacity: 0; on it (and a transition that takes care of the effect on :hover)
This is a simple version of the HTML:
<div class="project_container">
<div class="project_content">
<p>Content</p>
</div>
<img src="#" alt="test">
<div class="project_overlay"></div>
</div>
and the simplified 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;
}
}