imagen de superposición sobre la imagen con altura variable en CSS

Question

I tiene una imagen (base.jpg) que tiene la siguiente 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'"> 

La imagen de altura es variable. ¿De todos modos puedo superponer otra imagen (overlay.png, que es la imagen roja) en la parte superior de base.jpg, en la esquina inferior derecha usando css, al agregar otra declaración de clase al css anterior?

Muchas gracias

Answer 1

Necesita una esquina de la imagen div contenedor y la posición absoluta a continuación.

<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

No hay mucho que puede hacer con sólo .thumb-image. Si modifica el HTML de alguna manera, puede lograrlo con bastante facilidad. He puesto un ejemplo aquí: http://jsfiddle.net/imsky/AsUuh/

Esto funciona IE8 + (con doctype), y en todos los otros navegadores modernos, mediante el uso de: antes y el contenido generado. Puede convertirlo para que no use características modernas, pero eso significaría incluir un DIV adicional dentro de cada contenedor. Por otro lado,: before no funciona en las etiquetas IMG, por lo que es lo mínimo posible.

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