Overlaying a Image with CSS - html

Question

I have a store with a gallery. I was looking to overlay the Thumbnail if a Sold stamp that I made.
If i disable the image the overlay is showing bellow, so I know it is inserting the image, it isn't on top though.
What I see:
How I know the overlay is below (thumbnail disabled):
HTML:
<li class="post-66 product type-product status-publish has-post-thumbnail sold-individually shipping-taxable purchasable product-type-simple outofstock">
<center>
<a href="http://url.com">
<img width="150" height="150" src="thumbnail.jpg" class="attachment-shop_catalog wp-post-image" alt="coelho1" />
<h3>Coelho de Peluxe</h3>
</a>
</center>
</li>
CSS:
.outofstock {
background: url("soldoverlay.png") top left no-repeat;
position: relative;
z-index: 200;
}
.attachment-shop_catalog{
z-index: 1;
}
Can anyone please help me?
Kind Regards

Answer 1

The best way to make an overlay is use a pseudo-element using the class you already have outofstock. Check this snippet as an example:
li {
position: relative;
display: inline-block;
white-space: nowrap;
text-align:center;
margin:10px;
}
.outofstock:after {
content: " ";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, .6);
z-index: 10;
}
<ul>
<li>
<a href="http://url.com">
<img width="150" height="150" src="http://placehold.it/150" alt="coelho1" />
<h3>WITHOUT OVERLAY</h3>
</a>
</li>
<li class="outofstock">
<a href="http://url.com">
<img width="150" height="150" src="http://placehold.it/150" alt="coelho1" />
<h3>OVERLAY</h3>
</a>
</li>
</ul>
Edit
To keep the link to of the href you can create the pseudo-element inside the a tag like this:
li {
display: inline-block;
white-space: nowrap;
text-align: center;
margin: 10px;
}
a {
position: relative;
display:block;
}
.outofstock a:after {
content: " ";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, .6);
z-index: 10;
}
<ul>
<li>
<a href="http://url.com">
<img width="150" height="150" src="http://placehold.it/150" alt="coelho1" />
<h3>WITHOUT OVERLAY</h3>
</a>
</li>
<li class="outofstock">
<a href="http://url.com">
<img width="150" height="150" src="http://placehold.it/150" alt="coelho1" />
<h3>OVERLAY</h3>
</a>
</li>
</ul>

Answer 2

you could avoid to use an image and play with CSS 2D transformations (supported even on IE9)
e.g. http://codepen.io/anon/pen/NPydBP
Markup
<ul>
<li data-in-stock="vendido">
<a href="">
<img src="http://dummyimage.com/400x280/cccccc/fff.jpg" />
</a>
</li>
</ul>
CSS
li {
position: relative;
overflow: hidden;
}
[data-in-stock]:after {
position: absolute;
top: 0;
left: 0;
z-index: 1;
content: attr(data-in-stock);
display: block;
min-width: 160px;
color: #fff;
background: #222;
padding: 6px 10px;
text-transform: uppercase;
font: 1em Arial;
-webkit-transform: rotate(-42deg) translateX(-50px);
-moz-transform: rotate(-42deg) translateX(-50px);
transform: rotate(-42deg) translateX(-50px);
}
The text overlapped comes from the data-in-stock attribute in the markup, so you can easily change the text or optionally serve a different page language
This approach could also work if you need to show an image instead of a text (the content property also accepts an url to an image): see http://codepen.io/anon/pen/dPdNBQ
Final Result

Answer 3

1) Create a DIV to place your image in, set left and top css, and set z-index to 5, set width and height to be same as image
2) Create another DIV with same left, top, width, and height, but set z-index higher. Place img tag with outofstock in it