JSFiddle - React, Tailwind, and code Playground

by Prasanth K C

HTML

<div id="main_window">
                <div class="multi-window">
                    <div class="zoomer tile">
                        <img src="http://4.bp.blogspot.com/-rBSUHKH1qgk/UDTd1_5UwzI/AAAAAAAAABk/RwakA_alHV8/s1600/DreamStreetLogoDark.jpg.w560h378.jpg" width="207" height="138" />
                    </div>
                 </div>
              <div class="multi-window">
                    <div class="zoomer tile">
                        <img src="http://www.kuztek.com/images/portfolio/4reelfilms-logo.jpg" width="207" height="138" />
                    </div>
                 </div>
             <div class="multi-window">
                    <div class="zoomer tile">
                        <img src="http://www-deadline-com.vimg.net/wp-content/uploads/2010/03/handmade_films_logo.jpg" width="207" height="138" />
                    </div>
                 </div>
              <div class="multi-window">
                    <div class="zoomer tile">
                        <img src="http://static.neatorama.com/images/2008-12/paramount-majestic-mountain-logo.jpg" width="207" height="138" />
                    </div>
                 </div>
            </div>

CSS

#main_right #main_window {
height: 320px;
width: 460px;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
position: relative;
    }
    .multi-window {
height: 150px;
width: 218px;
float: left;
margin-right: 11px;
margin-bottom: 10px;
cursor: pointer;
    }
    .zoomer {
height: 140px;
width: 208px;
cursor:pointer;
    }
    .zoom {
height: 331px;
width: 450px;
float:none;
margin:0px;
cursor:pointer;
position:absolute;
left:0;
top:0;
background-color:#FFF;
    }
    .multi-window img {
width:100% !important;

JavaScript

$('.zoomer').on('mouseenter',function(){
			$(this).addClass('zoom').removeClass('zoomer');
			$('.zoom img').css({
				'width':'100%',
				'height':'100%'
				});
			
				$(this).bind('mouseleave click', function(){
					
					$(this).removeClass('zoom').addClass('zoomer');
					$('.zoomer').removeClass('zoomer');	

					});
			});