Hide one image on top of another with mouseover

Question

Hide one image on top of another with mouseover

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

1

I have a problem and I have been searching the forums for many hours and I have not been able to find the solution and that is why I need your help.

You will need an image that has to be on top of another, so you can "Hover" over it, you can see the image behind it, the images are the same size, but image # 1 is black and white the image above it is) and image # 2 is in color (it is the image that is below); I have some inconveniences to be able to do this.

The images come from the Database and are mounted in a loop, the CSS is made with Sass, the inconvenience that I have is when the was the following code:

This is the code in 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

All the images are mounted on top of each other, as in the following example:

And they should look like this: I've tried using an image with position: relative and 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;

and this happens: Everything would be fine, but one image is bigger than the other if I apply postition: absolute

Can someone help me with this please?

html css hover

asked by Paul Marquez 03.09.2018 в 17:06

source

3 answers

array sent by ajax does not reach full php JcomboBox returns Null Pointer Exception

score 0 · Answer 1

0

You could try putting height and anchor to the image so that they have the same dimension:

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

answered by 03.09.2018 в 17:14

score 0 · Answer 2

the container should be relative and at least one of the images will not be absolute with negative z-index, but the container does not cover space, something like this:

.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>

score 0 · Answer 3

Thanks for your help, I have been able to solve the problem by looking through several solutions and in the end it has been much easier than I thought, I leave to the solution in case someone serves:

@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

Thank you very much everyone.