CodePen

HTML

            
              <div id="faces">
	  <div id="face-area">
	      <div id="image-1" style="display:none;">
		       <img src="http://www.alexandery.net/wp-content/uploads/2013/05/IMG_0518.jpg" />
	      </div>
					<div id="image-2" style="display:none;">
						  <img src="http://www.alexandery.net/wp-content/uploads/2013/05/IMG_0517.jpg" />
					</div>
					<div id="image-3" style="display:none;">
					  <img src="http://www.alexandery.net/wp-content/uploads/2013/05/IMG_0516.jpg" />
					</div>
					<div id="image-4" style="display:none;">
					  <img src="http://www.alexandery.net/wp-content/uploads/2013/05/IMG_0515.jpg" />
					</div>
					<div id="image-5" style="display:none;">
					  <img src="http://www.alexandery.net/wp-content/uploads/2013/05/IMG_0519.jpg" />
					</div>
					<div id="image-6" style="display:none;">
					  <img src="http://www.alexandery.net/wp-content/uploads/2013/05/IMG_0520.jpg"/>
					</div>
					<div id="image-7" style="display:none;">
					  <img src="http://www.alexandery.net/wp-content/uploads/2013/05/IMG_0521.jpg"/>
					</div>
					
					<div id="the_faces_overlay">
						<div class="the_faces" data-number="1">
      </div>
						<div class="the_faces" data-number="2">
      </div>
						<div class="the_faces" data-number="3">
      </div>
						<div class="the_faces" data-number="4">
      </div>
						<div class="the_faces" data-number="5">
      </div>
						<div class="the_faces" data-number="6">
      </div>
						<div class="the_faces" data-number="7">
      </div>
				</div>	
		</div>	
</div>
            
          
!
via HTML Inspector

CSS

            
              body{
 background: #333 
}

#faces{
	width: 400px;
	height: 533px;
 margin: 0 auto;
 border: 8px solid white;
}


#faces .the_faces{
	height: 533px;
	width: 14.2857143%;
	float: left;
	margin: 0;
	padding: 0;
}


#the_faces_overlay{
	position: absolute;
	top: 0;
	left: 0;
	width: 400px;
}

#face-area{
	height: 533px;
	width: 400px;
	position: relative;
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /* Alexander Y - @the_alexyoung - http://www.alexandery.net */
jQuery(document).ready(function($){
       $("#image-4").show();
       $(".the_faces").each(function(){
							$(this).on("mouseover", function(){
								$("#image-"+$(this).attr("data-number")).show();
							}).on("mouseout",function(){
								$("#image-"+$(this).attr("data-number")).hide();
							});
						});
						$("#face-area").on("mouseleave", function(){
							$("#image-4").show();
						});
						$("#face-area").on("mouseenter", function(){
							$("#image-4").hide();
						});
	});

            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................