0

Tengo un slider con cards como estas:

<div class="card" style="width:400px">
  <img class="card-img-top" src="img_avatar1.png" alt="Card image">
  <img class="card-img-top" src="https://img1.freepng.es/20180420/eew/kisspng-bookmark-computer-icons-like-button-instagram-face-5ada502d8d70c7.2117741815242568135794.jpg" alt="Card image">

  <div class="card-body">
    <h4 class="card-title">John Doe</h4>
    <p class="card-text">Some example text.</p>
    <a href="#" class="btn btn-primary">See Profile</a>
  </div>
</div>

Necesito añadirle un icono de guardado como este:

introducir la descripción de la imagen aquí

Le he puesto a ambas imagene sposicion absoluta, pero se me descuadra el texto de abajo. Si solo le pongo posición absoluta al icono, logro ponerlo bien, pero cuando voy ajustando la imágenes a resoluciones móvil, se va desplazando el icono hasta perderse. ¿Cuál sería la forma más efectiva de conseguir que el icono se sitúe sobre la imagen y que no se descuadre al cambiar de resolución?

Espero que entendáis mi duda. Mi ejemplo como tal es muy parecido al que os he puesto, epro en un slider y las imágenes las tengo en local.

1
  • 1
    solo la imagen del bookmark debería estar en position: absolute y deberías jugar con las propiedades top y left en medidas absolutas px en lugar de medidas relativas %. Si pusieras el css sería más fácil ayudarte el 11 mar. 2021 a las 17:22

1 respuesta 1

1

el siguiente codigo css deberia funcionar:

.ico{
    width: 80px;
    position: absolute;
    top: 5px;
    left: 5px;
}

Solo añade la clase ico a la imagen del bookmark.

1
  • Funciona perfecto! Era lo que estaba buscando.
    – BlackName
    el 12 mar. 2021 a las 8:48

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.