CSS 애니메이션으로 마우스 오버시 이미지 너비 고정

Question

CSS3 애니메이션이 새로 도입되었습니다. 현재, 컨테이너를 끌 때 왼쪽으로 40 픽셀 씩 요소의 이미지를 이동하려고 시도하지만 이미지가 올라갈 때마다 컨테이너의 오른쪽에 빈 공간이 생깁니다. 나는 이미지에 큰 너비를 주려고했는데, 그 너비가 늘리면 빈 공간을주지 못하게했지만 이미지가 작동하지 않습니다. 나는 그것을 어떻게 말로 잘 모르겠다. 그래서 여기에 스크린 샷을 찍었다. 빨간색 화살표는 컨테이너를 올렸을 때 남은 빈 공간을 나타냅니다.

HTML :

<ul> 
    <li class="opinion card wrapper"> 
       <div id="card" class="opinion card container"> 
         <div class="opinion card image variation-3"> 
          <a href="" class="opinion card article link"></a> 
         </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/

Screenshot of the said problem

이 상기 요소의 HTML 및 CSS 코드입니다

여기에서 사용한 이미지는 내가 소유하고 있지 않습니다. 더 잘 볼 수 있도록 Imgur에서 무작위로 사진을 찍었습니다. 도움이 될 것입니다. 고맙습니다!

Answer 1

나는 내 자신의 문제를 해결했습니다. 기본적으로 .variation-3 클래스에서 max-width 및 min-width 속성을 사용하지 않았습니다. 또한 hovered 이미지의 width 속성을 정의했습니다 (이미지 상태에서 상속되어야 함). 이제 완벽하게 작동합니다.

.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); 
    } 

고마워요! JSFIDDLE :https://jsfiddle.net/fatzjuhe/2/