tengo un problema y llevo muchas horas buscando en foros y no he podido encontrar la solución y por eso necesito de vuestra ayuda.
Necesitará una imagen que tenga que estar encima de otra, para que pueda hacerlo "Hover" sobre ella, se puede ver la imagen que está detrás, las imágenes son del mismo tamaño, pero la imagen # 1 está en blanco y negro la imagen que tiene encima está) y la imagen # 2 está en color (es la imagen que esta debajo); tengo algunos inconvenientes para poder hacer esto esto.
Las imágenes vienen de la Base de Datos y están montadas en un bucle, el CSS está hecho con Sass, el inconveniente que tengo es cuando el fue el siguiente código:
Este es el código en html:
.collabs__light
position: absolute;
left: 0;
up: 0;
index z: -1;
.collabs__color
position: absolute;
left: 0;
up: 0;
index z: -2;
@foreach ($ collabs as $ index => $ collab)
<div class = "col-3 col-sm-2">
<img src = "{{asset ('storage / assets / collabs /'. $ collab .'_ light.png ')}}" class = "img-fluid collabs__light">
<img src = "{{asset ('storage / assets / collabs /'. $ collab .'_ color.png ')}}" class = "img-fluid collabs__color">
</ div>
@endforeach
Todas las imágenes se me montan una encima de otra, como en el siguiente ejemplo:
Y deberían de quedar así: He probado utilizar una imagen con position: relative y position: absolute
.collabs__light
posición: relative;
izquierda: 0;
arriba: 0;
z-index: -1;
.collabs__color
posición: absoluta;
izquierda: 0;
arriba: 0;
z-index: -1;
y sucede esto: Todo estaría bien, pero una imagen es más grande que la otra si le aplico postition: absolute
Alguien me puede ayudar con esto por favor?