How to toggle the z-index values to make the image appear into front or to background?

Question

I have many images which are overlapped on top of each other, I am trying to make the selected image to appear front or into background on click functionality. Toggling of images is working fine except for the top most image(image1 ) when the page loads.

When the page is first loaded and if I click the top most image, it should hide behind the 2nd image. But this is not happening because z-index of all images are set to 0 initially.

Expectation : The top most image should hide when I click it and the toggle should work for all images.

jQuery code to toggle the z-index values for the images:

function selectelement(){
  $("img.imgClass").click(function() {
    if($(this).css("z-index")=="0"){
      $(this).css("z-index",100); 
    }else{
      $(this).css("z-index",0); 
    } 
    return this;
  });
}

HTML code for Image :

<div class="imgContainer">
<span ng-repeat="addOn in viewModel.actSlideShow.children[viewModel.currentSlide].children >
<img class="imgClass ng-scope" ng-click="selectelement()" ng-src="pictures/vivek/bg1.jpg" alt="pictures/vivek/bg1.jpg" src="pictures/vivek/bg1.jpg"></span></div>

CSS for Images:

img {
    max-width: 455px;
    max-height: 303px;
    transform-origin: 50% 50% 0px;
    border-style: hidden;
    border-width: thin;
    z-index: 0;
}

Answer 1

Created a working version to illustrate.

https://jsfiddle.net/kvs32wtd/1/

 $("img.imgClass").click(function() { $('img.imgClass').each(function() { console.log($(this).attr('id')) a = parseInt($(this).css("z-index")); $(this).css("z-index", a + 1) }); a = $(this).css("z-index") - 1; $(this).css("z-index", a); return this; });

 img { max-width: 455px; max-height: 303px; transform-origin: 50% 50% 0px; border-style: hidden; border-width: thin; z-index: 0; position: absolute; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="imgContainer"> <img class="imgClass" id="one" src="https://photogallerylinks.com/pics/1651.jpg"> <img class="imgClass" id="two" src="https://www.timeshighereducation.com/sites/default/files/small_building.jpg"> <img id="three" class="imgClass" src="https://photogallerylinks.com/pics/1648.jpg"> </div>

Answer 2

You will need to add "Position: relative" to the CSS of the element you wish to apply a different z-index to.

You can do this in code:

$(this).css("position", "relative");

Or just directly in CSS:

img {
  position: relative;
  max-width: 455px;
  max-height: 303px;
  transform-origin: 50% 50% 0px;
  border-style: hidden;
  border-width: thin;
  z-index: 0;
}

Else, z-index will not have any impact.

Answer 3

 $("img.imgClass").click(function() { $('img.imgClass').each(function() { console.log($(this).attr('id')) a = parseInt($(this).css("z-index")); $(this).css("z-index", a + 1) }); a = $(this).css("z-index") - 1; $(this).css("z-index", a); return this; });

 img { max-width: 455px; max-height: 303px; transform-origin: 50% 50% 0px; border-style: hidden; border-width: thin; z-index: 0; position: absolute; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="imgContainer"> <img class="imgClass" id="one" src="https://photogallerylinks.com/pics/1651.jpg"> <img class="imgClass" id="two" src="https://www.timeshighereducation.com/sites/default/files/small_building.jpg"> <img id="three" class="imgClass" src="https://photogallerylinks.com/pics/1648.jpg"> </div>