Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Imagen sobre otra imagen

 Estas en el tema de Imagen sobre otra imagen en el foro de CSS en Foros del Web. Hola, Aunque el encabezado parece evidente, a ver si me explico lo que quiero hacer y alguien me puede echar una mano. Se trata de ...
  #1 (permalink)  
Antiguo 14/10/2015, 16:18
 
Fecha de Ingreso: agosto-2004
Mensajes: 106
Antigüedad: 20 años, 4 meses
Puntos: 3
Imagen sobre otra imagen
Hola,

Aunque el encabezado parece evidente, a ver si me explico lo que quiero hacer y alguien me puede echar una mano.

Se trata de aplicarle a ciertas imagenes un CSS que le añada una imagen encima. Por ejemplo, una foto y que en la esquina superior derecha aparezca una banda que ponga "Recomendada". Pero claro, ésto no se aplicaría a todas las imagenes, por eso querría un CSS sin esa banda y otro con ella.

El CSS de la foto normal, sin ninguna banda ni imagen sobre ella es:

Código: 
.imgcri {
	margin-top: 1px;
	margin-bottom: 60px;
	margin-left: 0px;
	width: 896px;
	height: 350px;
	z-index: 1;
	object-fit: cover;
	text-decoration: none;
	position: relative;
	
}
El CSS que he creado para aplicárselo a las fotos que quiera y que añadiría una banda, sería:

Código: 
.imgcri_rec {
	margin-top: 1px;
	margin-bottom: 60px;
	margin-left: 0px;
	width: 896px;
	height: 350px;
	z-index: 1;
	object-fit: cover;
	text-decoration: none;
	background: url(http://primeratoma.com.es/wp-content/themes/magzimus/images/peli_rec.png)no-repeat;	
	
}
La imagen que quiero que se superponga, mide 153x153 y se debería colocar en la esquina superior derecha, a modo de banda.

Un saludo y gracias de antemano.
  #2 (permalink)  
Antiguo 14/10/2015, 19:49
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 10 años, 1 mes
Puntos: 91
Respuesta: Imagen sobre otra imagen
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: 
Ver original
  1. <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: 
Ver original
  1. <div><img src="//lorempixel.com/200/400" class="imgcri" /><span class="imgcri_rec"></span></div>
  2.  
  3. <div><img src="//lorempixel.com/200/400/" class="imgcri" /><span class="imgcri_rec"></span></div>
  4.  
  5. <div><img src="//lorempixel.com/300/400" class="imgcri" /></div>
  6.  
  7. <div><img src="//lorempixel.com/300/400/" class="imgcri" /><span class="imgcri_rec"></span></div>
  8.  
  9. <div><img src="//lorempixel.com/400/400" class="imgcri" /></div>
  10.  
  11. <div><img src="//lorempixel.com/400/400/" class="imgcri" /></div>

Código CSS: 
Ver original
  1. .imgcri {
  2.     width: 300px;
  3.     height: 350px;
  4.     position: relative;
  5. }
  6. div {
  7.   position: relative;
  8.   width: 300px;
  9.   float: left;
  10. }
  11. div .imgcri_rec {
  12.   background: url(http://primeratoma.com.es/wp-content/themes/magzimus/images/peli_rec.png)no-repeat;
  13.   height: 153px;
  14.   width: 153px;
  15.   position: absolute;
  16.   top: 0;
  17.   right: 0;
  18.   z-index: 99;
  19. }

Demo:
http://codepen.io/AngelKrak/pen/pjWdzo
  #3 (permalink)  
Antiguo 14/10/2015, 22:55
 
Fecha de Ingreso: agosto-2004
Mensajes: 106
Antigüedad: 20 años, 4 meses
Puntos: 3
Respuesta: Imagen sobre otra imagen
Muchas gracias por la respuesta, eso es lo que quiero hacer.
Pero me encuentro con un problema, al meterle el <span> otros elementos se me desordenan.
El html de la página es:

Código: 
<div class="all-columns">
<div class="two-third first">

<img class="imgcri" src="http://www.primeratoma.com.es/wp-content/uploads/img_siempre_alice.jpg" alt="" width="895" height="350" />
<p style="text-align: justify;">La pareja (tanto detrás de las cámaras como en la vida real) formada por los directores Richard Glatzer (fallecido hace unos meses) y Wash Westmoreland, nos deja <strong>una espléndida película sobre la lucha de una mujer que lo tiene todo, contra una terrible enfermedad contra la que nada puede hacer</strong>. <em>Siempre Alice</em> se destapa como una cinta social (no de denuncia) con tintes dramáticos, apoyada sobre todo en una interpretación de su protagonista, <strong>una siempre solvente Julianne Moore</strong>.</p>
</div>
<div class="one-third">

<a href="http://www.primeratoma.com.es/wp-content/uploads/cartel_siempre_alice.jpg" rel="wp-video-lightbox"><img class="cartel_c aligncenter wp-image-11465 size-full" title="Siempre Alice." src="http://www.primeratoma.com.es/wp-content/uploads/cartel_siempre_alice.jpg" alt="" width="415" height="598" /></a><span class="encab_datos">Dirección</span>
<span class="datos">Richard Glatzer y Wash Westmoreland</span>
<span class="encab_datos">Guión</span>
<span class="datos">Richard Glatzer y Wash Westmoreland</span>
<span class="encab_datos">Dirección de fotografía</span>
<span class="datos">Denis Lenoir</span>
<span class="encab_datos">Música</span>
<span class="datos">Ilan Eshkeri</span>
<span class="encab_datos">Duración</span>
<span class="datos">101 minutos</span>
<span class="encab_datos">Nacionalidad</span>
<span class="datos">USA-Francia</span>
<span class="encab_datos">Más información</span>
<span class="datos">1.85:1 | <a href="http://www.imdb.com/title/tt3316960/" target="_blank"><img class="alignnone" style="margin-top: 0px; margin-bottom: -2px;" title="Enlace a ficha en IMDb" src="http://primeratoma.com.es/wp-content/uploads/2013/10/logo_imdb.jpg" alt="" width="24" height="12" /></a> | <a href="https://www.youtube.com/watch?v=7jBZPJmkbiw&amp;hd=1&amp;autoplay=1" rel="wp-video-lightbox"><img class="alignnone" style="margin-top: 0px; margin-bottom: -1px;" title="Ver tráiler en Youtube" src="http://primeratoma.com.es/wp-content/themes/magzimus/images/logo_trailer.png" alt="" width="15" height="11" /></a></span>

</div>
</div>
La primera línea es donde está la imagen. En el momento en el que le añado un <span>, se me descuadra el div class llamado "one third".

Un saludo.
  #4 (permalink)  
Antiguo 15/10/2015, 14:00
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 10 años, 1 mes
Puntos: 91
Respuesta: Imagen sobre otra imagen
Deberia de ser asi, prueba y dime que tal, si sigue sin funcionar pon todo tu codigo en codepen para poder ayudarte mejor ;) y recuerda que lleva un div padre ;)

Código HTML: 
Ver original
  1. <div class="all-columns">
  2. <div class="two-third first">
  3.  
  4. <img class="imgcri" src="http://www.primeratoma.com.es/wp-content/uploads/img_siempre_alice.jpg" alt="" width="895" height="350" /><span class="imgcri_rec"></span>
  5. <p style="text-align: justify;">La pareja (tanto detrás de las cámaras como en la vida real) formada por los directores Richard Glatzer (fallecido hace unos meses) y Wash Westmoreland, nos deja <strong>una espléndida película sobre la lucha de una mujer que lo tiene todo, contra una terrible enfermedad contra la que nada puede hacer</strong>. <em>Siempre Alice</em> se destapa como una cinta social (no de denuncia) con tintes dramáticos, apoyada sobre todo en una interpretación de su protagonista, <strong>una siempre solvente Julianne Moore</strong>.</p>
  6. </div>
  7. <div class="one-third">
  8.  
  9. <a href="http://www.primeratoma.com.es/wp-content/uploads/cartel_siempre_alice.jpg" rel="wp-video-lightbox"><img class="cartel_c aligncenter wp-image-11465 size-full" title="Siempre Alice." src="http://www.primeratoma.com.es/wp-content/uploads/cartel_siempre_alice.jpg" alt="" width="415" height="598" /></a><span class="encab_datos">Dirección</span>
  10. <span class="datos">Richard Glatzer y Wash Westmoreland</span>
  11. <span class="encab_datos">Guión</span>
  12. <span class="datos">Richard Glatzer y Wash Westmoreland</span>
  13. <span class="encab_datos">Dirección de fotografía</span>
  14. <span class="datos">Denis Lenoir</span>
  15. <span class="encab_datos">Música</span>
  16. <span class="datos">Ilan Eshkeri</span>
  17. <span class="encab_datos">Duración</span>
  18. <span class="datos">101 minutos</span>
  19. <span class="encab_datos">Nacionalidad</span>
  20. <span class="datos">USA-Francia</span>
  21. <span class="encab_datos">Más información</span>
  22. <span class="datos">1.85:1 | <a href="http://www.imdb.com/title/tt3316960/" target="_blank"><img class="alignnone" style="margin-top: 0px; margin-bottom: -2px;" title="Enlace a ficha en IMDb" src="http://primeratoma.com.es/wp-content/uploads/2013/10/logo_imdb.jpg" alt="" width="24" height="12" /></a> | <a href="https://www.youtube.com/watch?v=7jBZPJmkbiw&amp;hd=1&amp;autoplay=1" rel="wp-video-lightbox"><img class="alignnone" style="margin-top: 0px; margin-bottom: -1px;" title="Ver tráiler en Youtube" src="http://primeratoma.com.es/wp-content/themes/magzimus/images/logo_trailer.png" alt="" width="15" height="11" /></a></span>
  23.  
  24. </div>
  25. </div>
  #5 (permalink)  
Antiguo 16/10/2015, 11:04
 
Fecha de Ingreso: agosto-2004
Mensajes: 106
Antigüedad: 20 años, 4 meses
Puntos: 3
Respuesta: Imagen sobre otra imagen
Hola de nuevo,

Finalmente ya lo he conseguido. Lo único que si incluía en el CSS la class "div" me descuajeringaba todo, así que la he omitido y con algunos ajustes de márgenes (al final he optado por ponerla en el otro lado), lo conseguí.

Una vez más, muchísimas gracias por tu ayuda.
Una cosa más que he aprendido.

Un saludo y gracias.

Etiquetas: background, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 21:31.