Alt-Web Design & Publishing
CSS "Sold Out" Text Over an Image
Description:
Have you ever needed to add a "Sold Out" notice over an image? If you're like me, you probably resorted to making a whole new image in your graphics editor. Or moving your image into the background. Unfortunately, neither solution is ideal. I wanted something quick and easy for an auction page. And I didn't want to rebuild the layout every time an item sold.
With CSS Relative positioning on the image container along with Absolute positioning for the text, this simple "Sold Out" notice sits right on top of the image inside the HTML markup. And with the help of CSS3's transform property, we can make it visually interesting for the modern web browsers that support it. (Sadly, no support for rotated text in IE 6,7,8).
Screenshot from Chrome.
Tested and works in FF3.6, Safari and Chrome.
LIVE Example:
SOLD OUT
CSS Code
.ProdDiv {/** image container **/
position:relative;
width: 250px; /**some width in pixels, ems or %**/
border: thin silver solid;
margin: 0.5em;
padding: 0.5em;
text-align: center;
}
.Sold {/** text **/
font:bold 2.5em/1.5em Georgia, "Times New Roman", Times, serif;
color: red;
background: black;
text-align:center;
position: absolute;
/**adjust as needed**/
top: 20%;
left: 5%;
/**note: CSS3 TRANSFORM: ROTATE DOESN'T WORK IN ALL BROWSERS YET**/
-webkit-transform: rotate(-20deg); /**safari, chrome**/
-moz-transform: rotate(-20deg); /**firefox**/
transform: rotate(-20deg); /**other browsers**/
}
HTML Code
<div class="ProdDiv">
<img src="/path/image-filename.jpg" alt="" width="" height="" />
<p class="Sold">SOLD OUT</p>
</div>
