当图像悬停时，显示背景颜色

Question

我想在悬停图像时显示背景颜色，因此我将不透明度设置为 1，并为图像设置背景颜色，当图像悬停时设置不透明度为 0.5，这样背景颜色可以出现。但是背景色没有出现。

.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

当图像悬停时，显示背景颜色

When image is hovered, show background color

html

css

hover

opacity