How to create overlapping images using CSS

34
November 17, 2021, at 04:20 AM

I have created 5 images overlapping each other but I am stuck on this part ("Whenever the mouse is placed over any of the images that image must move to the front of the group and be the primary image on display. When the mouse has pulled away the image will return to its original position")

Answer 1

If you use a :hover pseudo class in CSS you can set the z-index of an image to greater than the other images.

When the hover class no longer exists the img will go back to its original position.

This snippet uses z-index: 1 as the default is 0.

img {
  position: absolute;
}
img:nth-child(2) {
  left: 50px;
}
img:nth-child(3) {
  left: 100px;
}
img:nth-child(4) {
  left: 150px;
}
img:nth-child(5) {
  left: 200px;
}
img:hover {
  z-index: 1;
}
<img src="https://picsum.photos/id/1015/200/300">
<img src="https://picsum.photos/id/1016/200/300">
<img src="https://picsum.photos/id/1018/200/300">
<img src="https://picsum.photos/id/1021/200/300">
<img src="https://picsum.photos/id/1023/200/300">

READ ALSO
Updated SSL Certificate for android application

Updated SSL Certificate for android application

How to update the SSL certificate for the app which is already in usedo we need to update whenever SSL expires? I'm using retrofit

47
How to define &quot;INT GENERATED ALWAYS AS IDENTITY&quot; column with node-pg-migrate?

How to define "INT GENERATED ALWAYS AS IDENTITY" column with node-pg-migrate?

How do I define a migration file using node-pg-migrate for the below table

37
Append data to field in object in javascript

Append data to field in object in javascript

I am trying to append data in field using javascript

60
How to fit Gaussian from my data with colab?

How to fit Gaussian from my data with colab?

I want to fit Gaussian from my data with colab(python) and to get mean valueFinally, I want to get linear graph from mean value

68