Overlay image over image with variable height in 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; }