CSS overlay graphics...how?
On this page - https://www.ledwarehouseuk.com - we have a list of thumbnail images each styled as follows:
<a href="LED-Lights-Bulbs.php?lbid=675" class="prodtmbpanel" title="4 Watt GU10 Wide Beam Angle (LWP0001)">
<div class="prodtmbpaneltop">
<img src="led-light-bulbs/tmb/LWP0001.jpg" width="160" height="160" alt="4 Watt GU10 Wide Beam Angle (LWP0002)" title="4 Watt GU10 Wide Beam Angle (LWP0002)" /><br>
<span class="h2style">4 Watt GU10 LED Bulb - Wide Beam Angle</span>
</div>
<div class="prodtmbpanelbtm">
<p><span class="homeprodprice">£5.30</span> inc. vat</p>
</div>
</a>
The CSS is:
.prodtmbpanel {float:left;width:173px;height:270px;border: 1px solid #CCCCCC;margin:2px 10px 8px 0;font: 16px "myriad-pro", Arial, Helvetica, sans-serif;text-decoration:none;border-radius: 6px;}
.prodtmbpanel:hover {border: 1px solid #FC9306;}
.prodtmbpaneltop {width:160px;height:230px;padding:0 5px 0 5px;}
.prodtmbpanelbtm {clear:both;width:100%;height:35px;background-color:#F0F0F0;padding:5px 0 0 0;font-size: 12px;text-align:left;border-radius: 6px;}
We'd like to create an overlay graphic, which is a transparent PNG, to highlight if a product is on offer (see attached image).
Is this possible using CSS?
Thank you
NJ