1

He visto que algunas páginas contienen imágenes con un texto sobre puesto, pero la etiqueta img no puede contener otras etiquetas ya que sólo es así:

<img src="algo.com/una_imagen"> 

Intenté lo siguiente:

<div>
<img src="algo.com/una_imagen">
<p>Texto</p>
</div>

Pero el texto sólo aparece debajo de la imagen.

2
  • Mirate la etiqueta canvas. el 25 jun. 2017 a las 0:05
  • La imagen con position:relative; y el texto con position:absolute;top: 150px; es una opción.
    – Dev. Joel
    el 25 jun. 2017 a las 0:06

1 respuesta 1

6

Importante poner tu imagen en posición relative y tu caja de texto en absolute como ya te han mencionado.

Un ejemplo simple.

div, img {
  display: block;
  position: relative;		
  width: 300px;
}

div p {
  background-color: rgba(255,255,255,.8);
  display: block;
  position: absolute;
  bottom: -16px;
  left: 0;
  padding: 5px;
  width: 100%;
}
<div>
  <img src="http://oi67.tinypic.com/28a11js.jpg">
  <p>Texto</p>
</div>

Si buscas un efecto hover, te dejare una alternativa.

.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
}

.container:hover .overlay {
  bottom: 0;
  height: 100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
<div class="container">
  <img src="http://oi67.tinypic.com/28a11js.jpg" alt="" class="image">
  <div class="overlay">
    <div class="text">Mi texto</div>
  </div>
</div>

Fuente: Image Hover Overlay

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.