Lorsque l'image est survolée, affichez la couleur d'arrière-plan

Question

Je souhaite que la couleur d'arrière-plan apparaisse lorsque je passe la souris sur une image. Je mets donc une opacité de 1 et une couleur de fond pour l'image et une opacité de 0,5 lorsque l'image est en vol stationnaire donc la couleur de fond peut apparaître. Mais la couleur de fond n'apparaît pas.

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

Au lieu de définir la couleur d'arrière-plan sur l'image, placez-le sur le conteneur d'image. Lorsque l'image est survolée, appliquez l'opacité, qui donne la transparence de l'image, et la couleur de fond sur le conteneur peut être vue.

.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