<div class="clip-block">
  			<section id="clipSection" class="clip-section">
		  		  <h1 class="title">wave or particle</h1>
			  	  <p class="sub-title">catch the light</p>
			  </section>
		</div>
		
<svg class="clip-svg">
			  <defs>
				    <clipPath id="hexagon-clip-animate" clipPathUnits="objectBoundingBox">
					      <polygon points="0.5 0, 0.50 0, 1 0.25, 1 0.75, 0.5 1, 0.5 1, 0 0.75, 0 0.25" id="hexagonPolygon" />
        <animate xlink:href="#hexagonPolygon" begin="clipSection.mouseover" attributeName="points" to="0.3 0, 0.7 0, 1 0.3, 1 0.7, 0.7 1, 0.3 1, 0 0.7, 0 0.3" dur="0.2s" fill="freeze"/>
        <animate xlink:href="#hexagonPolygon" begin="clipSection.mouseout" attributeName="points" to="0.5 0, 0.50 0, 1 0.25, 1 0.75, 0.5 1, 0.5 1, 0 0.75, 0 0.25" dur="0.2s" fill="freeze"/>
				    </clipPath>
			  </defs>
		</svg>	
	html, body, h1, p {
		margin: 0;
		padding: 0;
 }

	html, body {
		width: 100%;
		height: 100%;
	}

	body {
		font-family: 'Roboto Condensed', sans-serif;
		font-size: 18px;
		line-height: 1.5;
    background-color: crimson;
		background-image: url("http://karenmenezes.com/shapes-polygon/sunburst.jpg");
		background-size: cover;
		background-repeat: no-repeat;
	}

	p {
		margin: 0 0 10px 0;
	}
	
	.clip-svg {
		width: 0;
		height: 0;
	}
	
	.clip-block {
		max-width: 600px;
		margin: 0 auto;
		padding: 20px;
		text-align: center;
	}

	.clip-section {
		background: #fff; /* fallback for IE 8 */
		background: rgba(0, 255, 255, 0.12);
		text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
		padding: 70px 50px;
	    -webkit-clip-path: polygon(50% 0%, 50% 0%, 100% 25%, 100% 75%, 50% 100%, 50% 100%, 0% 75%, 0% 25%);
		clip-path: polygon(50% 0%, 50% 0%, 100% 25%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
		clip-path: url("#hexagon-clip-animate");
		-webkit-transition: all 0.2s linear;
		transition: all 0.2s linear;

	}

	.clip-section:hover {
		-webkit-clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
	    clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
		text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.8), 2px 2px 1px rgba(0, 0, 0, 0.2);			
		-webkit-transition: all 0.2s linear;
		transition: all 0.2s linear;
	}

	.clip-section, .clip-section a {
		color: rgba(255, 255, 255, 0.05);	
	}

	.title {
		margin-bottom: 20px;
	}

	.sub-title {
		font-size: 150%;
		letter-spacing: 3px;
	}

	.title, .sub-title {
		pointer-events: none; /* to allow the mouseover/mouseout events to pass through */
	}

	@media screen and (min-width: 600px) {
		.clip-section {
			padding: 160px 120px;
		}

		.title {
			font-size: 240%;
		}

		.sub-title {
			font-size: 150%;
			line-height: 1;
		}
	}

	@media screen and (min-width: 980px) {
		.clip-block {
			padding: 0;
			position: absolute;
			top: 50%;
			left: 50%;
			-ms-transform: translateY(-50%) translateX(-50%);
			-webkit-transform: translateY(-50%) translateX(-50%);
			transform: translateY(-50%) translateX(-50%);
		}
	}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.