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

Sold-Out in Chrome
Screenshot from Chrome.

Tested and works in FF3.6, Safari and Chrome.

LIVE Example:

image descriptions

SOLD OUT

How I survived a computer disaster

 

Spam Filter - Free Trial

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**/
}


Earn money from your website with Lunarpages Affiliate Program.
Lunarpages.com Web Hosting

HTML Code

<div class="ProdDiv">
<img src="/path/image-filename.jpg" alt="" width="" height="" />
<p class="Sold">SOLD OUT</p>

</div>

 
 

 

bookmarks

 

 

Lunarpages.com Web Hosting

 

Valid XHTML 1.0 Transitional    Valid CSS!

Demos:

CSS Templates: