當圖像被徘徊時，顯示背景顏色

我想讓背景顏色在我懸停圖像時出現，因此我將圖像的不透明度設置爲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>

來源

2017-02-10 michel lompret

相反在圖像上設置背景顏色，將其設置在圖像容器上。

當圖像被徘徊時，應用不透明度，這會提供圖像透明度，並且可以看到容器上的背景顏色。

.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

來源

2017-02-10 03:50:42

當圖像被徘徊時，顯示背景顏色

回答

相關問題