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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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