データベースフィールドの内容に応じて自動的に（ホバリングしないで）cssオーバーレイ

Question

データベースフィールドに含まれる3つのオプションのうち2つのオーバーレイを自動的に表示するようにしたいと考えています。彼らはSOLD、CONTRACT、NOです。

私は別SOLDためのオーバーレイとの契約を望んない、と私はオーバーレイで検索しました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

それはここで誰もが、私が追加されたコードである場合に役立ちます私はサムネイルのdivとキャプションのdivを追加したHTML

...、ここでは他の質問にJSフィドルのカップルを通してそれを働きましたデータベースフィールドの内容を条件に両方とも画像の下に表示します。

<?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でIは、サムネイル相対するためにコードを追加し、その後、データベースフィールド

.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); 

} 

に関連する画像のスタイルを2つのクラスを追加しました