Overlay image on CSS variable height image

Question

I have an image (base.jpg) that 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'"> 

Image height is variable. Anyway, can I overlay another image (overlay.png, which is a red image) on top of base.jpg in the lower right corner using css, adding another class declaration to the above css?

Many thanks

Answer 1

You will need a wrapper div and then the absolute position of 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

Not much can be done just with .thumb-image . If you change the HTML a bit, you can do it quite easily. I gave an example here: http://jsfiddle.net/imsky/AsUuh/

This works IE8 + (with doctype) and in all other modern browsers, using: before and generated content. You can convert it so you don’t use modern functions, but that would mean including an additional DIV inside each container. Aside: doesn't work on IMG tags before, so this is the least possible markup.

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