html - poner - Cuando la imagen está suspendida, muestra el color de fondo

como poner color de fondo en html en bloc de notas

Question

Quiero que aparezca el color de fondo cuando muevo una imagen, así que pongo una opacidad de 1 y un color de fondo para la imagen, y una opacidad de 0.5 cuando la imagen se desplaza para que aparezca el color de fondo. Pero el color de fondo no aparece.

enlace de 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>

Answer 1

En lugar de establecer el color de fondo en la imagen, configúrelo en el contenedor de imágenes.

Cuando la imagen esté suspendida, aplique la opacidad, que le da transparencia a la imagen, y se puede ver el color de fondo en el contenedor.

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

codepen revisado