<!DOCTYPE html>
<html>
<style>
* {margin:0px;padding:0px;}
body {height:100%;width:100%;background-color:black;overflow:hidden;}
img {position:fixed;height:50%;width:50%;animation-timing-function:ease-out;}
.top-left {top:0px;left:0px;}
.top-right {top:0px;right:0px;}
.bottom-left {bottom:0px;left:0px;}
.bottom-right {bottom:0px;right:0px;}
.larger {-webkit-animation: growlarger 1s;}
.smaller {-webkit-animation: growsmaller 1s;}
@-webkit-keyframes growlarger {
from {width: 50%;height:50%;z-Index:0;}
to {width: 100%;height:100%;z-Index:100;}
}
@-webkit-keyframes growsmaller {
from {width: 100%;height:100%;z-Index:100;}
to {width: 50%;height:50%;z-Index:0;}
}
</style>
<script>
function grow(element) {
var classes=element.classList;
var pattern = /larger/g;
var result=pattern.test(classes);
if (!result) {
element.classList.remove("smaller");element.classList.add("larger");
element.style.zIndex="100";element.style.width="100%";element.style.height="100%";
} else {
element.classList.remove("larger");element.classList.add("smaller");
element.style.width="50%";element.style.height="50%";element.style.zIndex="0";
}
}
</script>
</head>
<body>
<img class="top-left" onClick="grow(this);" src="http://upload.wikimedia.org/wikipedia/commons/f/fc/Yosemite_Valley_from_Wawona_Tunnel_view,_vista_point..JPG"></img>
<img class="top-right" onClick="grow(this);" src="http://www.getbustours.com/images/2%20Days%20Yosemite%20Vegas%20Express%20From%20San%20Francisco.jpg"></img>
<img class="bottom-left" onClick="grow(this);" src="http://static.travel.usnews.com/images/destinations/94/new_yosemite_main_cropped_2_445x280.jpg"></img>
<img class="bottom-right" onClick="grow(this);" src="http://cdn.allyosemite.com/images/content/12279_12548_Yosemite_National_Park_Highlights_md.jpg"></img>
</body>
</html>