Currently, I am working on an image gallery that has content generated randomly. In terms of CSS, the images are positioned using the following code:
.item {
width: 200px;
margin: 10px;
float: left;
}
To add some functionality, I have implemented JQuery to select one image from the gallery at random and double its length using .addClass along with the accompanying CSS:
.frontpageimagelong {
height: 200px;
width: 420px;
}
However, I encountered a problem where the longer image ends up being hidden under the next image in line instead of covering it. I am looking for a solution to make the extended image appear above the following image.
My initial thought was to utilize Z-Index like so:
.item {
width: 200px;
margin: 10px;
float: left;
position: relative;
z-index: 1;
}
.frontpageimagelong {
height: 200px;
width: 420px;
position: relative;
z-index: 99;
}
Unfortunately, this approach did not yield the desired result. If anyone has any suggestions or solutions on how to tackle this issue effectively, I would greatly appreciate it. Thank you.
EDIT: Included an image depicting the problem: