Когда изображение зависло, отобразите цвет фона

Question

Я хочу, чтобы цвет фона появился, когда я наводил изображение, поэтому добавляю непрозрачность 1 и фоновый цвет для изображения и непрозрачность 0,5, когда изображение зависает поэтому может появиться фоновый цвет. Но фоновый цвет не появляется.

codepen link

.article-preview-image img { 
 
    background-color: #58b253 !important; 
 
} 
 
.article-preview-image img { 
 
    opacity: 1 !important; 
 
    -webkit-transition: .3s ease-in-out !important; 
 
    transition: .3s ease-in-out !important; 
 
} 
 
.article-preview-image:hover img { 
 
    opacity: 0.5 !important; 
 
}

<div class="row"> 
 
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> 
 
    <figure class="article-preview-image"> 
 
     <img src="http://parnasse.ovh/wp-content/uploads/2016/04/po-bicubic.jpg" class="attachment-large size-large wp-post-image" alt="" srcset="http://parnasse.ovh/wp-content/uploads/2016/04/po-bicubic.jpg 400w, http://parnasse.ovh/wp-content/uploads/2016/04/po-bicubic-300x150.jpg 300w, http://parnasse.ovh/wp-content/uploads/2016/04/po-bicubic-220x110.jpg 220w" 
 
     sizes="(max-width: 400px) 100vw, 400px" width="400" height="200"> 
 
    </figure> 
 
    <h2 class="post-title"><a href="http://parnasse.ovh/t8/" class="post-title-link">t8</a></h2> 
 
    <p>If you would like to include more than one category, then just add another ID by inserting a comma and the ID number. For example, this is will display category 11 and category 14.</p> 
 
    <div class="clearfix"></div> 
 
    <a href="http://parnasse.ovh/t8/" class="btn btn-green btn-block">Read More</a> 
 
    <a href="http://parnasse.ovh/category/test/">test</a> 
 
    <br> 
 
    <div class="clearfix"></div> 
 
    </div> 
 
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> 
 
    <figure class="article-preview-image"> 
 
     <img src="http://parnasse.ovh/wp-content/uploads/2015/12/cropped-Science.jpg" class="attachment-large size-large wp-post-image" alt="" srcset="http://parnasse.ovh/wp-content/uploads/2015/12/cropped-Science.jpg 512w, http://parnasse.ovh/wp-content/uploads/2015/12/cropped-Science-150x150.jpg 150w, http://parnasse.ovh/wp-content/uploads/2015/12/cropped-Science-300x300.jpg 300w, http://parnasse.ovh/wp-content/uploads/2015/12/cropped-Science-180x180.jpg 180w" 
 
     sizes="(max-width: 512px) 100vw, 512px" width="512" height="512"> 
 
    </figure> 
 
    <h2 class="post-title"><a href="http://parnasse.ovh/t9/" class="post-title-link">t9</a></h2> 
 
    <p>If you would like to include more than one category, then just add another ID by inserting a comma and the ID number. For example, this is will display category 11 and category 14.</p> 
 
    <div class="clearfix"></div> 
 
    <a href="http://parnasse.ovh/t9/" class="btn btn-green btn-block">Read More</a> 
 
    <a href="http://parnasse.ovh/category/test/">test</a> 
 
    <br> 
 
    <div class="clearfix"></div> 
 
    </div> 
 
</div>

Answer 1

Вместо того чтобы устанавливать цвет фона на изображении, установить его на контейнере изображений.

Когда изображение зависнет, нанесите непрозрачность, которая дает прозрачность изображения, и цвет фона на контейнере можно увидеть.

.article-preview-image { 
    display: inline-block; /* element takes content width */ 
    background-color: red; /* for demo purposes */ 
} 
.article-preview-image img { 
    transition: .3s ease-in-out; 
} 
.article-preview-image:hover img { 
    opacity: 0.5; 
} 

revised codepen