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

Posted 2023-03-06

【中文标题】当图像悬停时，显示背景颜色

【英文标题】：When image is hovered, show background color

【发布时间】：2017-06-28 07:29:12

【问题描述】：

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

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"  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"  >
    </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"  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"  >
    </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>

【参考方案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