0

Quiero lograr este efecto de poner solo la mitad de una imagen de "perfil" sobre otra que sea un "banner"introducir la descripción de la imagen aquí:

no creo que sea de utilidad pero este es el codigo con el que estuve intentando lograrlo, la logro superponer pero no logro manipularla para dejarla donde yo quiero:

        <div class="images">
            <img src="assets/img/12.jpg" class="img-banner img-fluid">
            <img src="assets/img/foto-perfil.jpg" class="img-perfil">
        </div>

    </section>
 
.images{
 position: relative;
}

.img-banner{
    position: absolute;
    z-index: -10;
}

.img-perfil{
    position: absolute;
    top:0;
    max-width: 150px;
    max-height: 150px;
    border-radius: 50%;
    z-index: 10;
}

1 respuesta 1

1

img-banner No es necesario que tenga posición absoluta, en cambio img-perfil si lo necesita.

Luego el asunto es muy simple, a img-banner debes asignar la propiedad bottom en negativo y NO ocupar top

.img-banner {
 background-color:blue;
}
.img-perfil {
 background-color:red;
}


.images{
 position: relative;
}

.img-banner{
   width: 100%;
   height:260px;
}

.img-perfil{
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    z-index: 10;
    bottom: -50px;
    left: 75px;
}
<div class="images">
  <img src="assets/img/12.jpg" class="img-banner img-fluid">
  <img src="assets/img/foto-perfil.jpg" class="img-perfil">
</div>
 

1
  • Gracias! me venia quemado las pestañas hace horas y era mas facil de lo que pensaba
    – Facundo
    Commented el 26 ene. 2023 a las 13:03

Tu Respuesta

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

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