immagine Overlay sull'immagine con altezza variabile in CSS

Question

Ho un'immagine (base.jpg) che ha la seguente 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'"> 

L'immagine altezza è variabile. Posso comunque sovrapporre un'altra immagine (overlay.png che è l'immagine rossa) in cima a base.jpg nell'angolo in basso a destra usando il css aggiungendo un'altra dichiarazione di classe al css sopra?

Molte grazie

Answer 1

Avete bisogno di un 'immagine angolo div involucro e la posizione quindi assoluta.

<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

Non c'è molto che puoi fare con solo .thumb-image. Se modifichi l'HTML in qualche modo, puoi farlo abbastanza facilmente. Ho inserito un esempio qui: http://jsfiddle.net/imsky/AsUuh/

Questo funziona con IE8 + (con doctype) e con tutti gli altri browser moderni, utilizzando: prima e contenuto generato. Puoi convertirlo per non utilizzare funzionalità moderne, ma ciò significherebbe includere un DIV extra all'interno di ciascun contenitore. Per inciso,: prima non funziona sui tag IMG, quindi questo è il minimo del markup possibile.

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