CodePen

HTML

            
              <div id="faces">
	  <div id="face-area">
	      <div id="image-1">
		       <img src="http://www.alexandery.net/wp-content/uploads/2013/05/IMG_0518.jpg" />
	      </div>
					<div id="image-2">
						  <img src="http://www.alexandery.net/wp-content/uploads/2013/05/IMG_0517.jpg" />
					</div>
					<div id="image-3">
					  <img src="http://www.alexandery.net/wp-content/uploads/2013/05/IMG_0516.jpg" />
					</div>
					<div id="image-4">
					  <img src="http://www.alexandery.net/wp-content/uploads/2013/05/IMG_0515.jpg" />
					</div>
					<div id="image-5">
					  <img src="http://www.alexandery.net/wp-content/uploads/2013/05/IMG_0519.jpg" />
					</div>
					<div id="image-6">
					  <img src="http://www.alexandery.net/wp-content/uploads/2013/05/IMG_0520.jpg"/>
					</div>
					<div id="image-7">
					  <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>
            
          
!

↑ Insert the most common viewport meta tag

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;
  z-index:2;
}

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

#face-area > div {
position:absolute;
}

            
          
!
? ?
? ?
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").css('z-index',1);
       $(".the_faces").each(function(){
							$(this).on("mouseover", function(){
								$("#image-"+$(this).attr("data-number")).css('z-index',1);
							}).on("mouseout",function(){
                $("#image-"+$(this).attr("data-number")).css('z-index',0);
							});
						});
						$("#face-area").on("mouseleave", function(){
							$("#image-4").css('z-index',1);
						});
						$("#face-area").on("mouseenter", function(){
							$("#image-4").css('z-index',0);
						});
	});

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