1

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:

introducir la descripción de la imagen aquí Y deberían de quedar así: introducir la descripción de la imagen aquí 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: introducir la descripción de la imagen aquí 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?

1
  • tienen el mismo tamaño las imágenes en color con respecto a su versión gris? Commented el 3 sept. 2018 a las 17:41

3 respuestas 3

0

podrias probar poniendo altura y anchor a la imagen para que tengan la misma dimencion:

 img {
     height: 20px;
     width: 20px;
 }
0
0

el contenedor debería ser relative y al menos una de las imagenes no ser absolute con z-index negativo, sino el contenedor no abarca espacio, algo asi:

.contenedor {
  position: relative;
  display: block;
  width: 100%;
}

.contenedor .img-fluid {
  display: block;
  width: 100%
}

.col-3 {
  width: 33%;
  float: left;
}

.collabs__light {
  z-index: 1;
}

.collabs__color {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -2;
}

.contenedor:hover .collabs__color {
  z-index: 10;
  cursor: pointer;
}
<div class="col-3 col-sm-2 contenedor">
  <img src="https://picsum.photos/g/200/100/?image=0" class="img-fluid collabs__light">
  <img src="https://picsum.photos/200/100/?image=0" class="img-fluid collabs__color">
</div>
<div class="col-3 col-sm-2 contenedor">
  <img src="https://picsum.photos/g/200/100/?image=21" class="img-fluid collabs__light">
  <img src="https://picsum.photos/200/100/?image=21" class="img-fluid collabs__color">
</div>
<div class="col-3 col-sm-2 contenedor">
  <img src="https://picsum.photos/g/200/100/?image=82" class="img-fluid collabs__light">
  <img src="https://picsum.photos/200/100/?image=82" class="img-fluid collabs__color">
</div>
<div class="col-3 col-sm-2 contenedor">
  <img src="https://picsum.photos/g/200/100/?image=63" class="img-fluid collabs__light">
  <img src="https://picsum.photos/200/100/?image=63" class="img-fluid collabs__color">
</div>
<div class="col-3 col-sm-2 contenedor">
  <img src="https://picsum.photos/g/200/100/?image=54" class="img-fluid collabs__light">
  <img src="https://picsum.photos/200/100/?image=54" class="img-fluid collabs__color">
</div>
<div class="col-3 col-sm-2 contenedor">
  <img src="https://picsum.photos/g/200/100/?image=154" class="img-fluid collabs__light">
  <img src="https://picsum.photos/200/100/?image=154" class="img-fluid collabs__color">
</div>

0

gracias por vuestra ayuda, he podido resolver el problema buscando entre varias soluciones y al final ha sido mucho más fácil de lo que pensaba, dejo al solución por si a alguien le sirve:

@foreach ($collabs as $index => $collab)
    <div class="col-3 col-sm-2">
        <img onmouseout="this.src='{{ asset('storage/assets/collabs/'. $collab .'_light.png') }}';" onmouseover="this.src='{{ asset('storage/assets/collabs/'. $collab .'_color.png') }}';" src="{{ asset('storage/assets/collabs/'. $collab .'_light.png') }}" class="img-fluid"/>
    </div>
@endforeach

Muchas gracias a todos.

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.