8

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.sstatic.net/aRTiRm.jpg">
  <div class="card-title">Nombre</div>
</div>

7
  • Quieres replicar esa carta, por lo que el texto deberá ir en la parte inferior derecha, ¿no?
    – Alvaro Montoro
    Commented el 5 mar. 2018 a las 19:08
  • si por supuesto Commented el 5 mar. 2018 a las 19:08
  • esta pregunta esta relacionado con bootstrap, mientras aquella es css solo @FranciscoRomero Commented el 9 mar. 2018 a las 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. Commented el 9 mar. 2018 a las 18:09
  • 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. Commented el 9 mar. 2018 a las 18:13

2 respuestas 2

8

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>

1
  • eres un crack griezmann, pero contra el barsa no hiciste NADA ! jeje Commented el 5 mar. 2018 a las 19:14
4

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>
1
  • lo siento tienes razón ya le complete la descripción
    – user75901
    Commented el 5 mar. 2018 a las 19:14

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