Tengo un contenedor donde se cargará una imagen. el detalle es que aparece un contorno alrededor del elemento img que no es su borde, y no se a que se deba.
*{
background:black;
}
.image-shoe {
display: flex;
align-items: center;
justify-content: center;
min-height: 300px;
}
#image_shoe {
object-fit: cover;
width: 100%;
height: 100%;
border:none;
margin-bottom: 10px;
outline: none;
}
.file-upload {
position: relative;
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
#register .camera-icon {
background-color: #29fd53;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 50px;
padding: 50px;
color: #fff;
}
<div class="image-shoe col-md-4">
<div class="file-upload">
<img alt="" id="image_shoe">
<label for="selected_image_kicks" class="camera-icon">
<i class="fal fa-camera"></i>
</label>
<input type="file" id="selected_image_kicks" style="display:none">
</div>
</div>
Lo peor es que en el snnipet que añadi no se muestra, pero se trata del contorno de la imagen. El elemento img no tiene una imagen cargada aun, pero se cargará con js una vez se seleccione.