imagefade

by Chris Dennis

HTML

Words in the background
<div id=overlay>
</div>
<div id=nav>
<div id=prev></div>
<div id=next></div>
</div>
<!--<div id=swapcontainer>-->
<img id=image1 src="https://plottingshed.art/plots/20200016/photo_hu6fc288758bdd49ebc0dcd626855bea2f_2378008_600x0_resize_q90_bgffffff_lanczos_2.jpg">
<img id=image2 src="https://plottingshed.art/plots/20190062/photo_hucb6efcc8e752127b04d46e7943d4c411_6071110_600x0_resize_q90_bgffffff_lanczos_2.jpg">
<!--</div>-->

CSS

#overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  background: yellow;
  opacity: 0.5;
}
#nav {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 11;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
#prev {
  background: cyan;
  height: 50%;
  width: 50%;
  pointer-events: auto;
}
#next {
  background: green;
  height: 50%;
  width: 50%;
  pointer-events: auto;
}
#container {
  border: 1px white solid;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 12;
  /* display: flex;
  justify-content: center;
  align-items: center; */
pointer-events: none;
}
#image1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 13;
  xwidth: 40%;
  height: 70%;
  background: red;
pointer-events: auto;
  opacity: 1.0;
  transition: opacity 1s ease-in-out;
}
#image2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 14;
  xwidth: 70%;
  height: calc(100% - 10vw); /* 60%; */
  background: blue;
pointer-events: none; /* initially */
  /*display: none;*/
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

JavaScript

$('#image1').click(function(e) { 
	//alert("image1") 
	//e.preventDefault();
  $('#image2').css({'opacity':"1", "pointer-events": "auto"});
  $('#image1').css({'opacity':'0', "pointer-events": "none"});
  // also need to adjust clickiness and/or set to display not after transitioning to 0 opacity
});
$('#image2').click(function(e) {
	//alert("image2") 
  $('#image1').css({'opacity':"1", "pointer-events": "auto"});
  $('#image2').css({'opacity':'0', "pointer-events": "none"});
});
$('#prev').click(function() { alert("prev") });
$('#next').click(function() { alert("next") });
$('#overlay').click(function() { alert("close") });
//$('#container').click(function() {
//	// pass it to overlay underneath
//  //$('#overlay').click();
//})