画像を上に置くと、背景色が表示されます

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