Split view feature box with CSS skew transform and transitions

In this example below you will see how to do a Split view feature box with CSS skew transform and transitions with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by DM_Daria, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright DM_Daria ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Split view feature box with CSS skew transform and transitions</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<div class="box sunrise"><a href="#box2"></a></div>

<div class="slider">
	<div class="box sunset"><a href="#box1"></a></div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/DM_Daria/split-view-feature-box-with-css-skew-transform-and-transitions-VmjYGN */
.slider {
	/* set initial width */
	width: 520px;
		   
	/* hide the content that overflows (to allow second box to show through) */
	overflow: hidden;
	display: inline-block;
		   
	/* skew container so that it has angled edge, and set up transition */
	transform: skewX(-20deg);
	transition: width 1.2s ease-in-out;
		  
	/* give negative margin to remove gap caused by left hand skew */
	margin-left: -76px;
	border-right: 10px solid ghostwhite;
		   
	/* hide pointer events for unseen content */
	pointer-events: none;
}
		
/* set the size of the boxes and any decoration */
.box { 
	width: 880px;
	height: 330px;
	border-radius: .5em;
}
		
/* make the links the size of the full boxes (not needed for technique) */
.box a { 
	display: block; 
	width: 100%; 
	height: 100%;
}
		
.sunset {
	/* skew back by negative of parent’s skew so contents is upright */
	transform: skewX(20deg);
		  
	background: url(https://dl.dropbox.com/u/444684/splitfeature/sunset-elephant.jpg) no-repeat;
	margin-left: 76px; /* give margin to push content away from left slanted edge */
	pointer-events: auto;	/* allow pointer events for the box */
}
		
.sunrise {
	background:  url(https://dl.dropbox.com/u/444684/splitfeature/sunrise.jpg) no-repeat;
	position: absolute; 	/* remove from flow so sunset is placed on top */
	box-shadow: 0 0 10px rgba(0, 0, 0, .7);
}
		
/* make first box bigger on hover, and smaller when hover second box */
.slider:hover {
	width: 760px;
}
		
.sunrise:hover + .slider { 
	 width: 250px;
}
		
/* decoration for body, header and footer */
body {  
	/* style body. can ignore */
	font-family: helvetica, sans-serif; 
	margin: 3em; 
	background: url(https://dl.dropbox.com/u/444684/splitfeature/noiselight.png), radial-gradient(50% -80%, #d1d1d1, #d9d9d9);
}
h1 { 
	color: #2F2F2F;
	font-size: 26px;
	text-shadow: 0 0 2px white;
	margin-bottom: 1.5em;
}
		
footer { 
	position: absolute;
	bottom: 1px;
	color: dimgrey;
	text-shadow: 0 0 1px white;
	font-size: 12px;
}
footer a { 
	color: darkorange;
	text-decoration: none;
}

Comments