Overlay image over image with variable height in CSS - css

Question

I have an image (base.jpg) which has the following css:
.thumb-image {
padding: 0;
border: none;
margin: 0 auto 5px;
display: block;
width: 205px;
background: #EEE;
color: #8A8989;
border-image: initial;}
<img class="thumb-image" src="base.jpg" alt="" onerror="this.src='thumb.png'">
The image height is variable. Is there anyway I can overlay another image (overlay.png which is the red image) on top of base.jpg on the bottom right cornerusing css by adding another class declaration to the above css?
Many thanks

Answer 1

You need a wrapper div and then absolute position the corner image.
<div id="wrap">
<img src="img/big.jpg" class="big" alt=""/>
<img src="img/corner.jpg" class="corner" alt=""/>
</div>
#wrap { position: relative; }
.big, .corner { display: block; }
.corner { position: absolute; right: 0; bottom: 0; }

Answer 2

There's not much you can do with just .thumb-image. If you modify the HTML somewhat, you can accomplish this fairly easily. I've put up an example here: http://jsfiddle.net/imsky/AsUuh/
This works IE8+ (with doctype), and across all other modern browsers, by using :before and generated content. You can convert it to use no modern features, but that would mean including an extra DIV inside each container. As an aside, :before doesn't work on IMG tags, so this is as minimal of markup as possible.
HTML:
<div class="thumb-container">
<div class="thumb-image">
<img src="http://placekitten.com/205/300">
</div>
</div>
CSS:
.thumb-image {
margin:0 auto 5px;
width:205px;
background:#EEE;
color:#8A8989;
border-image:initial;
position:relative;
z-index:0
}
.thumb-image img {
border:0;
display:block;
width:100%
}
.thumb-container {
position:relative
}
.thumb-image:before {
content:"";
display:block;
position:absolute;
width:100px;
height:100px;
bottom:0px;
right:0px;
z-index:1;
background:url(http://placekitten.com/100)
}