Animation with images on top of each other

Question

I am trying to achieve a little image animation that add the images on top of each other in a semi transparent way so all images can be seen at once.

Also the buttons should work as on and off so different image or colour combinations can be achieved.

At the moment I can use each button only once and also only 2 images can be seen.

( Code Pen )

 function crossfadeImages() { var $active = $('#show-img .active'); var $next = $('#show-img .next'); $active.animate({ opacity: "0.5" }, 500, function() { $(this).stop('style'); }); } $('.buttons a.page').first().addClass('activeButton'); $('.buttons a.page').click(function() { $('.buttons a.page').removeClass('activeButton'); $(this).addClass('activeButton'); if (!$('#show-img').find('img').eq($(this).attr('rel')).hasClass('active')) { //if the clicked image is not already the active image $('#show-img').find('img').eq($(this).attr('rel')).addClass('next'); //flag the image as the next one crossfadeImages(); } return false; }) 

 img { width: 65%; opacity: 1; } /*image show*/ #show-img { position: relative; } #show-img img { position: absolute; z-index: 1; background-color: #fff; } #show-img img.active { z-index: 3 } #show-img img.next { z-index: 2 } img { display: block; } .button { width: 200px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="large-5 columns buttons"> <br> <br> <br> <br> <h4>the possebilities</h4> <br> <br> <br> <br> <a class="page activeButton radius blue button" href="#" rel="0">button1</a> <br> <a class="page radius green button" href="#" rel="1">button2</a> <br> <a class="page radius red button" href="#" rel="2">button3</a> <br> <a class="page radius black button" href="#" rel="3">button4</a> </div> <div id="show-img" class="large-7 columns show-img"> <h1>main header</h1> <img class="active" src="http://vollwebdesign.com/foundation- testing/blue.png"> <img src="http://vollwebdesign.com/foundation-testing/rosa.png"> <img src="http://vollwebdesign.com/foundation-testing/yellow.png"> <img src="http://vollwebdesign.com/foundation-testing/orange.png"> </div> </div> 

Answer 1

I tweaked ur code a little and made this fiddle. https://jsfiddle.net/osha90/g3Lwst0n/ . hope this is what you were looking for

    <div class="row">

   <div class="large-5 columns buttons">
      <br> <br> <br> <br>
      <h4>the possebilities</h4> <br> <br> <br> <br>
      <a class="page activeButton radius blue button" href="#" rel="0">button1</a><br>
      <a class="page radius green button" href="#" rel="1">button2</a><br>
      <a class="page radius red button" href="#" rel="2">button3</a><br>
      <a class="page radius black button" href="#" rel="3">button4</a>
  </div>

   <div id="show-img" class="large-7 columns show-img">
      <h1>main header</h1>
      <img src="http://vollwebdesign.com/foundation-testing/blue.png">
      <img src="http://vollwebdesign.com/foundation-testing/rosa.png">
      <img src="http://vollwebdesign.com/foundation-testing/yellow.png">
      <img src="http://vollwebdesign.com/foundation-testing/orange.png">       

  </div>
</div>

The css Code

/*image show*/
#show-img {
  position: relative;
}
#show-img img {
  position: absolute;
  z-index: 1;
  background-color: transparent;
  width: 65%;
  opacity: 0;
  transition: all 0.5s ease-out;
}
#show-img img:first-of-type {
  opacity: 1;
}
#show-img img.active{
  opacity: 0.7;
}
.button {
  width: 200px;
}

Js Code

$('.buttons a.page').click(function() {
  if($("#show-img img:eq(0)").css("opacity") == 1){
    $("#show-img img:eq(0)").css("opacity","0.7");
  }
  var index = $(this).attr("rel");
  var correspondingImage = $("#show-img img:eq(" + index + ")");
  if ($(this).hasClass("active")) {
    $(this).removeClass("active");
    correspondingImage.removeClass("active");
  } else {
    $(this).addClass("active")
    correspondingImage.addClass("active");
  }
  return false;
})