A CodePen by Alexander Y. Cool Head-Turn Trick - Saw this awesome head-turn trick on ivivision.com and thought I would try and replicate it. With the use of a bit jQuery, CSS3 and HTML5 when you hover your mouse over the image horizontally, it appears as the image follows you.... http://www.alexandery.net/cool-head-turn-trick/

index.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/04/look-left3-e1365032206956.jpg" />
	      </div>
					<div id="image-2" style="display:none;">
						  <img src="http://www.alexandery.net/wp-content/uploads/2013/04/look-left2-e1365032152347.jpg" />
					</div>
					<div id="image-3" style="display:none;">
					  <img src="http://www.alexandery.net/wp-content/uploads/2013/04/lookleft3-e1365032364205.jpg" />
					</div>
					<div id="image-4" style="display:none;">
					  <img src="http://www.alexandery.net/wp-content/uploads/2013/04/center-e1365032031355.jpg" />
					</div>
					<div id="image-5" style="display:none;">
					  <img src="http://www.alexandery.net/wp-content/uploads/2013/04/look-right1-e1365032264729.jpg" />
					</div>
					<div id="image-6" style="display:none;">
					  <img src="http://www.alexandery.net/wp-content/uploads/2013/04/look-right2-e1365032403284.jpg"/>
					</div>
					<div id="image-7" style="display:none;">
					  <img src="http://www.alexandery.net/wp-content/uploads/2013/04/look-right3-e1365032457790.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>

script.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();
						});
	});

style.css

body{
 background: #333 
}

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


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


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

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