automatic (not hover) css overlay depending on database field content - php

Question

I want to make the following bootstrap code automatically show an overlay for two out of three options contained in a database field. They are SOLD, CONTRACT, and NO.
I want different overlays for SOLD and CONTRACT, and no overlay for NO
I have searched for overlays, most tutorials have on hover events, and I am lost as to how to do this.
<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

I worked it out through a couple of js fiddles on other questions here, if it helps anyone here is the code I added...
html
I added a thumbnail div and a caption div underneath the image both conditional on the contents of the database field.
<?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>
<? } ?>
Then in the CSS I added code to make the thumbnail relative, and then added the two classes to style the image relating to the database field
.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);
}