Tengo una vista en la que va el profile de un usuario. En ella tiene un input file para cargar la imagen de perfil, pero tiene que quedar como el diseño redondo que os muestro en la foto.
Y lo único que he conseguido es hacerla de manera cuadrada, ya que si le doy estilos al div padre y a la imagen y las pongo redondas, la parte del change image se me descuadra y se sale del div.
Os dejo lo que tengo actualmente.
.profile-img {
text-align: center;
}
.profile-img img {
width: 70%;
height: 100%;
}
.profile-img .file {
position: relative;
overflow: hidden;
margin-top: -20%;
width: 70%;
border: none;
border-radius: 0;
font-size: 15px;
background: #212529b8;
}
.profile-img .file input {
position: absolute;
opacity: 0;
right: 0;
top: 0;
}
<div class="profile-img">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS52y5aInsxSm31CvHOFHWujqUx_wWTS9iM6s7BAm21oEN_RiGoog" alt="" />
<div class="file btn btn-lg btn-primary">
Change Photo
<input type="file" name="file" />
</div>
</div>