CODEWITHSUNDEEP
htmlcsshoveropacity
michel lompret
michel lompret

Reputation: 317

When image is hovered, show background color

I want to have background-colour appears when I hover an image so I put an opacity of 1 and a background-colour for the image, and an opacity of 0.5 when the image are hover so the background-colour can appears. But the background-colour doesn't appear.

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>

Upvotes: 4

Views: 62

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371163

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

When the image is hovered, apply the opacity, which gives the image transparency, and the background color on the container can be seen.

.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

Upvotes: 3

Related Questions