Fixing image width on hover with CSS animation - html

Question

I am new with CSS3 animation. Currently, I'm trying to move the image in an element by 40px to left when the container is hovered, but every time the image is hovered it will give an empty space to the right side of the container. I have tried to give the image a bigger width to ensure it not giving any empty space when being hovered, but it doesn't work.
I'm not really sure how to word it, so I put a screenshot here. The red arrow shows the empty space left when the container is hovered.
Screenshot of the said problem
This is the HTML and CSS code of the said element:
HTML:
<ul>
<li class="opinion card wrapper">
<div id="card" class="opinion card container">
<div class="opinion card image variation-3">
</div>
<div class="opinion card text variation-3">
<a href="">
<h2 class="opinion card headline">
<span class="highlight">Contoh judul pendek yang agak panjang tapi panjang</span>
</h2>
</a>
<a href="/author" class="opinion card author link">
<span class="highlight noTransition">Author Name</span>
</a>
<a href="/author" class="opinion card date link">
<span class="highlight noTransition">Publication Date</span>
</a>
<p class="opinion card description">
Indoor air pollution gets surprisingly little attention for such a lethal public health problem. It kills more people each year than HIV/AIDS and malaria combined, but few countries treat it as a crisis on the same level.
</p>
</div>
</div>
</li>
</ul>
CSS
.opinion.card.wrapper {
position: relative;
display: inline-block;
float: left;
width: 25%;
margin:0;
padding: 0;
overflow: hidden;
color: white;
box-sizing: border-box;
background: transparent;
}
.card.wrapper {
height: 618px;
}
.opinion.card.container {
overflow: hidden;
height: inherit;
display: block;
margin: 15px;
position: relative;
}
.opinion.card.article.link {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
z-index: 3;
}
.opinion.card.author.link {
z-index: 1;
}
.opinion.card.image {
background: url("https://i.imgur.com/SvO0n5b.jpg") no-repeat;
background-position: center, center;
background-size: cover;
display: block;
height: inherit;
overflow: hidden;
position: absolute;
top: 0;
width: 150%;
cursor: pointer;
}
.opinion.card.image.variation-3 {
background-image: url("https://i.imgur.com/SvO0n5b.jpg");
position: relative;
float: left;
overflow: hidden;
display: block;
min-height: 100%;
max-width: 100%;
opacity: 0.8;
max-width: none;
width: 100%;
height: -webkit-calc(100% + 50px);
height: calc(100% + 50px);
-webkit-filter: contrast(1.05) brightness(1.1);
filter: contrast(1.05) brightness(1.1);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;/*
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;*/
}
.opinion.card.image.variation-2:before,
.opinion.card.image.variation-3:before {
content: "";
position: absolute;
height: 150%;
top:-200;
left: 0;
bottom: 0;
right: 0;
opacity: 0;
overflow:hidden;
}
.opinion.card.image.variation-3:before {
background-color: rgba(0,0,0,0.3);
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,50px,0);
transform: translate3d(0,50px,0);
}
.opinion.card.text {
float: left;
text-align: left;
margin: 30px 30px 45px 30px;
position: absolute;
bottom: 0;
left: 0;
}
.opinion.card.text.variation-3 {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,50px,0);
transform: translate3d(0,50px,0);
}
.opinion.card.headline {
font-family: "Patua One", "Georgia", serif;
font-size: 40px;
font-size: 2.2222rem;
color: #fff;
margin-bottom: 10px;
position: relative;
}
.opinion.card.author,
.opinion.card.date {
font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
font-size: 18px;
font-size: 1rem;
color: #505eea;
position: relative;
}
.opinion.card.description {
font-family: "Roboto", "Arial", sans-serif;
font-size: 16px;
font-size: 0.8889rem;
font-style: italic;
color: #f1f1f1;
width: 90%;
margin-top: 30px;
line-height: 1.5;
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
.opinion.card.description:before {
position: absolute;
top: -15px;
left: 0;
width: 100%;
height: 5px;
background: #fff;
content: "";
-webkit-transform: translate3d(0,40px,0);
transform: translate3d(0,40px,0);
}
.opinion.card .highlight {
background-color: #000;
padding: 5px;
}
.opinion.card.container:hover .opinion.card.image {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.opinion.card.container:hover .opinion.card.image.variation-3 {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-40px,0, 0);
transform: translate3d(-40px,0,0);
width: 100%;
}
.opinion.card.container:hover .opinion.card.image.variation-2:before {
opacity: 1;
/*background-color: rgba(0,0,0,0.2);*/
background-image: url(img/pattern_2.png);
}
.opinion.card.container:hover .opinion.card.image.variation-3:before,
.opinion.card.container:hover .opinion.card.container:after {
opacity: 1;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}
.opinion.card.container:hover .opinion.card.container:after,
.opinion.card.container:hover .opinion.card.description:before, {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.opinion.card.container:hover .opinion.card.text.variation-3,
.opinion.card.container:hover .opinion.card.description:before {
-webkit-transform: translate3d(0,0,0) scale(1);
transform: translate3d(0,0,0) scale(1);
}
.opinion.card.container:hover .opinion.card.description,
.opinion.card.container:hover .opinion.card.container:after {
opacity: 1;
-webkit-transform: translate3d(0,0,0) scale(1);
transform: translate3d(0,0,0) scale(1);
}
.opinion.card.container:hover .opinion.card.container:after {
width: 100%;
height: 100%;
}
.opinion.card.container:hover .opinion.card.headline {
color: #505eea;
transition: 0.3s ease-in-out;
}
.opinion.card.container:hover .opinion.card.author {
transition: color 0s;
}
a.opinion.card.author:hover {
color: #fff;
transition: all 0.3s ease-in-out;
}
#media (min-width: 1280px) {
.home.container {
margin: auto;
max-width: 1200px;
}
.card.wrapper {
height: 618px;
}
.opinion.card.wrapper {
display: inline-block;
width: 33.3333333%;
min-width: 33.3333333%;
}
.opinion.card.wrapper:first-child {
width: 66.66666666666%;
}
}
JSFiddle: https://jsfiddle.net/fatzjuhe/1/
I don't own the image used here, I just took a random picture from Imgur for better viewing.
Any help will be very much appreciated. Thank you!

Answer 1

I have solved my own problem. Basically, I messed up with the max-width and min-width properties in the .variation-3 class. I also defined the width property of the hovered image (should be inherited from the image state before being hovered ). It works perfectly now.
.opinion.card.image.variation-3 {
background-image: url("https://i.imgur.com/SvO0n5b.jpg");
float: left;
overflow: hidden;
display: block;
width: 120%;
-webkit-filter: contrast(1.05) brightness(1.1);
filter: contrast(1.05) brightness(1.1);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
.opinion.card.container:hover .opinion.card.image.variation-3 {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-40px,0, 0);
transform: translate3d(-40px,0,0);
}
Thank you!
JSFIDDLE: https://jsfiddle.net/fatzjuhe/2/