Imagen sobre otra imagen

[AngelKrak]

Mira amigo, ahi te explico, hice un div contenedor para la imagen principal y la imagen de la banda "Recomendada" para ponerle la banda solamente ahi que agregar el span con la clase de la banda, en tal caso:

Código HTML:

<span class="imgcri_rec"></span>
 

iria despues de la imagen principal en el div contenedor ;) si no la quieres poner, solo pon el div contenedor y la imagen principal y listo ;)

Codigo:

Código HTML:

<div><img src="//lorempixel.com/200/400" class="imgcri" /><span class="imgcri_rec"></span></div>
 
<div><img src="//lorempixel.com/200/400/" class="imgcri" /><span class="imgcri_rec"></span></div>
 
<div><img src="//lorempixel.com/300/400" class="imgcri" /></div>
 
<div><img src="//lorempixel.com/300/400/" class="imgcri" /><span class="imgcri_rec"></span></div>
 
<div><img src="//lorempixel.com/400/400" class="imgcri" /></div>
 
<div><img src="//lorempixel.com/400/400/" class="imgcri" /></div>
 

Código CSS:

.imgcri {
    width: 300px;
    height: 350px;
    position: relative;
}
div {
  position: relative;
  width: 300px;
  float: left;
}
div .imgcri_rec {
  background: url(http://primeratoma.com.es/wp-content/themes/magzimus/images/peli_rec.png)no-repeat;
  height: 153px;
  width: 153px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 99;
}
 

Demo:
http://codepen.io/AngelKrak/pen/pjWdzo