Foscam 4 by 4 Camera Feeds

<!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>