自動（不懸停）CSS取決於數據庫字段內容的覆蓋

Question

我想讓以下引導代碼自動爲數據庫字段中包含的三個選項中的兩個選項顯示重疊。他們被賣，合同和沒有。

我要爲銷售，合同，也沒有...我已經尋找疊加覆蓋爲NO

不同的覆蓋，最教程對懸停事件，而我失去了對如何做到這一點。

<div class="row"> 
<div class="col-md-6 col-md-offset-3"> 
<a href="listing_show.php?ID=<?php echo($Recordset1->getColumnVal("ID")); ?>"> 
<img src="images/<?php echo($Recordset1->getColumnVal("IMAGE")); ?>" class="img-responsive center-block sold" alt="<?php echo($Recordset1->getColumnVal("TITLE")); ?>"/> 
</a> 
</div><br><br> 
</div> 

Answer 1

我的工作了，通過一對夫婦的其他問題JS小提琴這裏，如果它可以幫助任何人在這裏爲我添加的代碼...

HTML 我加了一個縮略圖股利和標題DIV在數據庫字段的內容的條件下。

<?php if($Recordset1->getColumnVal("SOLD") == "YES") { ?> 
<div class="caption post-content-sold"></div> 
<? } ?> 
<?php if($Recordset1->getColumnVal("SOLD") == "CON") { ?> 
<div class="caption post-content-contract"></div> 
<? } ?> 

然後在CSS我添加代碼，以使相對的縮略圖，然後添加了兩個類樣式與數據庫中的字段

.thumbnail { 
position: relative; 
} 

.post-content-sold { 
background: rgba(255, 255, 255, 0.8) none repeat scroll 0 0; 
opacity: 0.8; 
top:0; 
left:0; 
min-width: 100%; 
max-height: 98%; 
position: absolute; 
color: #ffffff; 
content:url(http://www.mtnlakerealty.com/sold.png); 

} 
.post-content-contract { 
background: rgba(255, 255, 0, 1) none repeat scroll 0 0; 
opacity: 1; 
top:5%; 
left:5%; 
max-width: 50%; 
max-height: 50%; 
position: absolute; 
color: #ffffff; 
content:url(http://www.mtnlakerealty.com/contract.png); 

} 

圖像