7

Necesito colocar texto encima de una imagen que es responsiva (estoy usando bootstrap 4). Pero el texto me queda por fuera, intento replicar esta carta (las figuras que están por fuera no). El texto me queda por fuera.

introducir la descripción de la imagen aquí

Éste es el código que tengo:

#content_div_one_photo {
  height: 16rem;
  width: 11rem;
  border-radius: 10px;
  border: 5px solid black;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<div id="padre">
  <img id="content_div_one_photo" class="img-fluid card-img"  src="https://i.stack.imgur.com/aRTiRm.jpg">
  <div class="card-title">Nombre</div>
</div>
Edgar Gutiérrez
  • 3,705
  • 10
  • 23
Alex Hunter
  • 353
  • 2
  • 4
  • 15
  • Quieres replicar esa carta, por lo que el texto deberá ir en la parte inferior derecha, ¿no? – Alvaro Montoro Mar 05 '18 at 19:08
  • si por supuesto – Alex Hunter Mar 05 '18 at 19:08
  • esta pregunta esta relacionado con bootstrap, mientras aquella es css solo @FranciscoRomero – Alex Hunter Mar 09 '18 at 18:08
  • @imFSN Esta relacionada con bootstrap, pero realmente la respuesta aceptada si te fijas no utiliza ninguna propiedad propia de bootstrap, si no que utiliza `position: relative` y `position: absolute` que son propiedades de CSS puro. – Francisco Romero Mar 09 '18 at 18:09
  • si, pero la cuestion era combinar css con bootstrap para que no perdiera forma @FranciscoRomero – Alex Hunter Mar 09 '18 at 18:10
  • 1
    @imFSN Realmente no hay que pensar que bootstrap y CSS son incompatibles. Son totalmente compatibles, como en este caso, de hecho, si no no tendría sentido el uso de bootstrap. Realmente lo he marcado como posible duplicado, aunque puedo estar confundido. De momento dejaría que la comunidad decidiera. – Francisco Romero Mar 09 '18 at 18:13
  • seguro, saludos @FranciscoRomero – Alex Hunter Mar 09 '18 at 18:28

2 Answers2

7

El truco es ponerle una posición relativa al padre y una absoluta al nombre. De ese modo se colocará de manera absoluta con respecto al padre.

#content_div_one_photo {
  height: 16rem;
  width: 11rem;
  border-radius: 10px;
  border: 5px solid black;
}

#padre {
  position: relative;    /* para poder posicionar el texto de forma absoluta */
  display: inline-block; /* para que solo ocupe el ancho de la imagen */
}

.card-title {
  position: absolute;    /* posición absolute con respecto al padre */
  bottom: 0;             /* posicionada en la esquina inferior derecha */
  right: 1rem;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<div id="padre">
  <img id="content_div_one_photo" class="img-fluid card-img" src="https://lorempixel.com/160/110/cats/1/">
  <div class="card-title">Gato</div>
</div>
Alvaro Montoro
  • 48,157
  • 26
  • 100
  • 179
2

espero que con este ejemplo pueda ayudar en tu duda, la imagen queda en posición relativa y el texto en posición absoluta para poder con la propiedad top elevarlo encima de la imagen, y le coloque un width de 100% para que la imagen se escale

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    img{
      width: 100%;
      position: relative;
    }
    p{
      position: absolute;
      font-size: 1em;
      top: 100px;
    }
  </style>
</head>
<body>
<img src="https://vignette.wikia.nocookie.net/lossimpson/images/b/bd/Homer_Simpson.png/revision/latest?cb=20100522180809&path-prefix=es" alt="">
<p>Hola Mundo</p>
</body>
</html>