index.html

<link href='http://fonts.googleapis.com/css?family=Open+Sans:700' rel='stylesheet' type='text/css'>

<a id="view-code" href="http://codepen.io/virgilpana/pen/wBOBYo" target="_blank">VIEW CODE</a>

<div id="window">
	<div id="header">
    	<div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
    </div>       
    
    <div id="grid-selector">
	    <div id="viewCarousel"></div>
    	<div id="viewGrid" class="active">
	        <p></p>
            <p></p>
            <p></p>
            <p></p>            
        </div>        
    </div>
    
    <div id="headline">
    	<p></p>
        <p class="short"></p>
    </div>
    
    <div class="thumbs">    
	    <p>
        	<span></span>
            <span class="short"></span>
        </p>
        <p>
        	<span></span>
            <span class="short"></span>
        </p>
        <p>
        	<span></span>
            <span class="short"></span>
        </p>
         <p>
        	<span></span>
            <span class="short"></span>
        </p>
        <p>
        	<span></span>
            <span class="short"></span>
        </p>
        <p>
        	<span></span>
            <span class="short"></span>
        </p>
    </div>
    
    <div id="carousel">
    	<div class="innerCarousel">
        	<div>
            	
            </div>
            <div>
                <p class="current">
                    <span></span>
                    <span class="short"></span>
                </p>
            </div>
            <div>    
                <p>
                    <span></span>
                    <span class="short"></span>
                </p>
            </div>
            <div>    
                <p>
                    <span></span>
                    <span class="short"></span>
                </p>
            </div>
            <div>
                <p>
                    <span></span>
                    <span class="short"></span>
                </p>
            </div>
            <div>    
                <p>
                    <span></span>
                    <span class="short"></span>
                </p>
            </div>
            <div>    
                <p>
                    <span></span>
                    <span class="short"></span>
                </p>
            </div>
        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

script.js

$(document).ready(function(){
	
	$('#viewCarousel').click(function(){		
		if($(this).hasClass('active')) return;
		$(this).addClass("active");
		$("#viewGrid").removeClass("active");
		
		setCarousel();
		$('.thumbs p').eq(0).clone().addClass("floating-thumb").appendTo("#window")
		$('.thumbs').fadeOut(300);
		setTimeout(function(){			
			$('.floating-thumb').addClass('animate');
			$("#carousel").delay(200).fadeIn(200, function(){$('.floating-thumb').remove();});
		}, 150);			
	});	
	
	$('#viewGrid').click(function(){
		if($(this).hasClass('active')) return;
		$(this).addClass("active");
		$("#viewCarousel").removeClass("active");
		
		$("#carousel").fadeOut(200, function(){resetCarousel();});		
		$("<p class='floating-thumb animate'><span></span><span class='short'></span></p>").appendTo("#window");
		$('.thumbs').show();
		var parentpos = $('#window').offset();
		var childpos = $('.thumbs p').eq(currentSlide-1).offset();
		$('.thumbs').hide();
		
		$('.floating-thumb').removeClass('animate').css({'top':(childpos.top - parentpos.top) - 16+ "px", 'left': (childpos.left - parentpos.left)+"px", "transition": "300ms cubic-bezier(0,.93,.33,.99)", 'width': '155px', 'height':"60px", "padding-top":"121px"});
		$('.thumbs').delay(300).fadeIn(200, function(){$('.floating-thumb').remove()});   	
		
	});	
	
	  /* ----  Image Gallery Carousel   ---- */
	
	var carousel = $('#carousel .innerCarousel');
	var carouselSlideWidth = 337;
	var currentSlide = 1;		
	var isAnimating = false;
	var carouselSlides = $('.innerCarousel div');
	
	
	setCarousel();		
	
	function resetCarousel(){
		$(carouselSlides).find('p').removeClass('current').eq(0).addClass('current');
		$("#carousel .innerCarousel").css('left','-168px');
		currentSlide = 1;
	}	
		
	function setCarousel(){

		// building the width of the casousel
		var carouselWidth = 0;
		$('#carousel div').each(function(){
			carouselWidth += carouselSlideWidth;
		});		

		$(carousel)[0].style = "";
		$(carousel).css('width', carouselWidth);
		// Load Next Image
		$(carouselSlides).eq(currentSlide).prev().find('p').unbind( "click" ).click(function(){
		
			if($(this).hasClass('current')){return;}
			var currentLeft = Math.abs(parseInt($(carousel).css("left")));
			var newLeft = currentLeft - carouselSlideWidth;		
			
			
			if(isAnimating === true){return;}
			$(carousel).css({'left': "-" + newLeft + "px",
								   "transition": "500ms cubic-bezier(0,.93,.33,.99)"
								 });
			isAnimating = true;
			$(this).addClass("current");
			$(carouselSlides).eq(currentSlide).find('p')[0].className ="";
			setTimeout(function(){
				isAnimating = false;
				currentSlide--;
				setCarousel();
			}, 500);			
			
		});		
		
		$(carouselSlides).eq(currentSlide).next().find('p').unbind( "click" ).click(function(){		
	
			if($(this).hasClass('current')){return;}	
			var currentLeft = Math.abs(parseInt($(carousel).css("left")));
			var newLeft = currentLeft + carouselSlideWidth;			
	
			if(isAnimating === true){return;}	
			$(this).addClass("current");
			$(carouselSlides).eq(currentSlide).find('p')[0].className ="";
			$(carousel).css({'left': "-" + newLeft + "px",
								   "transition": "500ms cubic-bezier(0,.93,.33,.99)"
								 });
			isAnimating = true;
			setTimeout(function(){
				isAnimating = false;
				currentSlide++;
				setCarousel();
			}, 500);			
		});
		
	}
	
	
	
   });

style.css

body{
	background:#5298fc; 	
	text-align:center;
  font-family: "Open Sans", sans-serif; 
}
#view-code{
  color:#fff;  
  opacity:0.7;
  font-size:14px;
  text-transform:uppercase;
  font-weight:700;
  text-decoration:none;
  position:absolute;top:700px; left:50%;margin-left:-35px;
}
#view-code:hover{opacity:1;}
#window{
	margin:30px auto 0;
	border-radius:6px;
	background:#fff;
	width:675px;
	height:620px;	
	overflow:hidden;
	position:relative;
}
#header{
	background:#e3e5e9;
	height:33px;
	padding-left:18px;
}
#header .circle{
	background:#9fa2a8;
	border-radius:50%;
	float:left;
	width:12px;
	height:12px;
	margin-right:6px;
	margin-top:11px;
}

.thumbs{ padding:10px 50px 30px 70px; }
.thumbs p, .thumbs p.floating-thumb{
  background: #e3e5e9;
  width: 155px;
  height: 60px;
  margin: 30px 30px 0 0;
  border-radius: 4px;
  float: left;
  padding-top: 121px;
}

.floating-thumb{	
	background: #e3e5e9;
    width: 155px;
    height: 60px;    
    border-radius: 4px;
    float: left;
    padding-top: 121px;
	position:absolute;
	top: 156px;
	left: 70px;
}
.floating-thumb.animate{
	width:303px;
	height:80px;
	margin-top:20px;
	padding-top: 326px;	
	top: 146px;
    left: 186px;
	-webkit-transition: all 400ms cubic-bezier(0,.93,.33,.99);
	   -moz-transition: all 400ms cubic-bezier(0,.93,.33,.99);
	    -ms-transition: all 400ms cubic-bezier(0,.93,.33,.99);
	     -o-transition: all 400ms cubic-bezier(0,.93,.33,.99);
		    transition: all 400mscubic-bezier(0,.93,.33,.99);
}
.thumbs p span, p.floating-thumb span{
	display:block;
	height:10px;
	margin:10px 20px;
	background:#d2d4d9;
	border-radius:2px;
}
.thumbs p span.short, p.floating-thumb span.short{width:50px;}
.thumbs p:hover{
	background:#dfe0e5;
	cursor:pointer;
	-webkit-transition: all 100ms ease-out;
	   -moz-transition: all 100ms ease-out;
	    -ms-transition: all 100ms ease-out;
	     -o-transition: all 100ms ease-out;
		    transition: all 100ms ease-out;
	
}
#headline{padding:39px 50px 0px 70px;}
#headline p{
	width:380px;
	margin:10px 0;
	height:15px;
	background:#9fa2a8;
	border-radius:3px;
}
#headline p.short{width:220px;}

#grid-selector{
	width:100px;
	position:absolute;
    top: 92px;
    right: 79px;	
}

#viewCarousel{
	background:#e3e5e9;
	width:20px;
	height:20px;
	float:right;
	border-radius:1px;
}
#viewCarousel:hover{
	cursor:pointer;
}

#viewCarousel:hover, #viewGrid:hover p{
	cursor:pointer;
	background:#cacdd1;
}
#viewCarousel.active, #viewGrid.active p{
	color:#5298fc;
}
#viewGrid{
	width:22px;
	height:20px;
	float:right;
	margin-top:-1px;
	margin-right:5px;
}

#viewGrid p{
	background: #e3e5e9;
	  width: 9px;
	  height: 9px;
	  float: right;
	  border-radius: 1px;
	  margin: 1px;
}
#viewGrid.active p, #viewCarousel.active{
	background:#9fa2a8;
}

#carousel{ 
	overflow:hidden;	
	position:relative;
	height:488px;
    margin-top: 25px;
	display:none;
	position:absolute;
	top:121px; 
	left:0;
	width:675px;
}
#carousel .innerCarousel{
	position:absolute;
	top:0; 
	left:-168px;

}
#carousel .innerCarousel div{
	width:	337px;
	height:448px;
	text-align:center;
	float:left;
}
#carousel .innerCarousel div p{
  background: #e3e5e9;
  width: 220px;
  height: 73px;
  margin: 30px auto 0 auto;
  border-radius: 4px;
  padding-top: 300px;
  margin-top: 38px;  
  -webkit-transition: all 300ms cubic-bezier(0,.93,.33,.99);
	   -moz-transition: all 300ms cubic-bezier(0,.93,.33,.99);
	    -ms-transition: all 300ms cubic-bezier(0,.93,.33,.99);
	     -o-transition: all 300ms cubic-bezier(0,.93,.33,.99);
		    transition: all 300ms cubic-bezier(0,.93,.33,.99);
  
}
#carousel .innerCarousel div p:hover{cursor:pointer;}
#carousel .innerCarousel div p.current:hover{cursor:normal;}

#carousel .innerCarousel div p.current{
	width:303px;
	height:80px;
	margin-top:20px;
	padding-top: 326px;	
	-webkit-transition: all 300ms cubic-bezier(0,.93,.33,.99);
	   -moz-transition: all 300ms cubic-bezier(0,.93,.33,.99);
	    -ms-transition: all 300ms cubic-bezier(0,.93,.33,.99);
	     -o-transition: all 300ms cubic-bezier(0,.93,.33,.99);
		    transition: all 300ms cubic-bezier(0,.93,.33,.99);
}
#carousel .innerCarousel span,
p.floating-thumb.animate span{
	height:10px;
	display:block;
	margin:10px 30px;
	height:12px;
	background:#d2d4d9;
	border-radius:3px;
}
#carousel .innerCarousel span.short,
p.floating-thumb.animate span.short{width:170px;}
	

	
	
	
.title{
	position:absolute; 
	top:152px;
	left:0;
	width:100%;
	height:60px;
	overflow:hidden;
	-webkit-transition: all 400ms cubic-bezier(0,.93,.33,.99) 120ms;
	   -moz-transition: all 400ms cubic-bezier(0,.93,.33,.99) 120ms;
	    -ms-transition: all 400ms cubic-bezier(0,.93,.33,.99) 120ms;
	     -o-transition: all 400ms cubic-bezier(0,.93,.33,.99) 120ms;
		    transition: all 400ms cubic-bezier(0,.93,.33,.99) 120ms;
}

wBOBYo.markdown

wBOBYo

A Pen by Virgil Pana on CodePen.

License.