Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

Como colocar texto encima de una imagen guía completa

En esta ocasión vamos a hacer una guía completa de como colocar texto encima de una imagen de una manera sencilla utilizando un poco de css y unos cuantos conceptos de maquetación.

Este tipo de practica es ideal para agregar leyendas a las imágenes o simplemente para agregar uno o mas valores de un producto por ejemplo el precio, la categoría etc aunque lo mas usado son las descripciones de la imagen o del articulo donde se encuentra dicha imagen.

Te voy a dejar dos ejemplos css uno para utilizar un solo texto encima de la imagen que puedes usar de leyenda etc y otro para que puedas agregar dos o mas textos.

Vamos con el ejemplo 1 para meter un solo texto:
<style>
   .img-texto {
   	position: relative;
   	float: left;
   }
   .img-texto span {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: #136e73;
    padding: 10px;
    color: #fff;
    font-family: sans-serif;
   }
</style>

<div class="img-texto">
<img src="http://i.imgur.com/9nY6MsA.jpg">
<span>Lorem ipsum dolor sit amet, consectetur.</span>
</div>
y ahora vamos con el ejemplo de varios textos:
<style>
   .img-texto {
   	position: relative;
   	float: left;
   }
   .img-texto span {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: #136e73;
    padding: 10px;
    color: #fff;
    font-family: sans-serif;
   }
   .texto-i {
   	right: inherit !important;
    left: 0;
   }
   .texto-d {
   	right: 0;
    left: inherit !important;
   }
</style>

<div class="img-texto">
<img src="http://i.imgur.com/9nY6MsA.jpg">
<span class="texto-i">Consola</span>
<span class="texto-d">499€</span>
</div>
si necesitas alguna modificación deja un comentario ;)

saludoss
2
Puntos
3458
Visitas
3
Resp
Por alber hace 15 meses
Administrador
Respuesta #1
¿Como pongo un solo texto encima de la imagen, pero en el centro e invisible con una url?
Es muy complicado lo que quiero, discúlpame.
1
Puntos
Por Techno Fox hace 13 meses
Principiante
Respuesta #2
Si creas un nuevo tema con tu pregunta te lo explico, salu2!
0
Puntos
Por alber hace 13 meses
Administrador
Respuesta #3
@Techno Fox yo solo usa esto:

<a href="#">
<img src="#">
</a>
1
Puntos
Por dios hace 11 meses
Principiante
Compartir en facebook
Compartir en twitter
Compartir
Para comentar Inicia sesión o Registrate