When the image freezes, specify the background color

Question

I want the background color to appear when I hover the image, so I add an opacity of 1 and a background color for the image, and an opacity of 0.5 when the image is hovering, so the background color can be displayed. But the background color is not displayed.

link codepen

.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>

Run codeHide result

Answer 1

Instead of setting the background color on the image, install it in the image container.

When the image freezes, apply opacity, which gives the image transparency, and you can see the background color in the container.

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

modified code