CSSPLAY

CSS DEMOS › Shapes Hexagonal with hover

Date : 14th August 2015

For all modern browsers except IE and Firefox

Dr Terry SmithHead of Department Graphics, Art & Media

Ms Pauline JonesHead of Department, Fashion and Textiles

Mr William FreemanDeputy Head of the College of Engineering

Dr Sarah SmileSchool Business Manager

Mrs Mollie WatsonAssociate Professor in Astronomy

Mr Brian CharlesSenior Lecturer in Biological Physics

Dr James IsherwoodDeputy Head of the College of Science

Information

Another demonstration using CSS shapes. This one demonstrates that shapes can be animated.

So seven hexagonal shapes with text 'inside' and a hover effect to show the portraits within the hexagons. The portraits are hidden because their initial 'shape' has no area, but animates to the same hexagonal shape as the containing element on hover.

Each hexagon is also a link.

HTML Code

<div class="wrapper">
	<a href="#a" class="container p1">
		<img class="right" src="hexagon/hex-blank.png">
		<img class="left" src="hexagon/hex-blank.png">
		<span>Dr Terry Smith</span>Head of Department Graphics, Art & Media
		<div class="panel"></div>
	</a>
	<a href="#b" class="container p2">
		<img class="right" src="hexagon/hex-blank.png">
		<img class="left" src="hexagon/hex-blank.png">
		<span>Ms Pauline Jones</span>Head of Department, Fashion and Textiles
		<div class="panel"></div>
	</a>
	<a href="#c" class="container p3">
		<img class="right" src="hexagon/hex-blank.png">
		<img class="left" src="hexagon/hex-blank.png">
		<span>Mr William Freeman</span>Deputy Head of the College of Engineering
		<div class="panel"></div>
	</a>
	<a href="#d" class="container p4">
		<img class="right" src="hexagon/hex-blank.png">
		<img class="left" src="hexagon/hex-blank.png">
		<span>Dr Sarah Smile</span>School Business Manager
		<div class="panel"></div>
	</a>
	<a href="#e" class="container p5">
		<img class="right" src="hexagon/hex-blank.png">
		<img class="left" src="hexagon/hex-blank.png">
		<span>Mrs Mollie Watson</span>Associate Professor in Astronomy
		<div class="panel"></div>
	</a>
	<a href="#f" class="container p6">
		<img class="right" src="hexagon/hex-blank.png">
		<img class="left" src="hexagon/hex-blank.png">
		<span>Mr Brian Charles</span>Senior Lecturer in Biological Physics
		<div class="panel"></div>
	</a>
	<a href="#g" class="container p7">
		<img class="right" src="hexagon/hex-blank.png">
		<img class="left" src="hexagon/hex-blank.png">
		<span>Dr James Isherwood</span>Deputy Head of the College of Science
		<div class="panel"></div>
	</a>
</div>

Cascading Style Sheet

.wrapper {
position:relative; 
display:block;
width:458px; 
height:442px;
margin:20px auto;
}
.container {
display:block; 
overflow:hidden; 
position:absolute; 
cursor:pointer; 
text-decoration:none; 
color:#000; 
background:#bbb;
text-align:center; 
font:normal 13px/16px arial, sans-serif;
width:152px; height:176px;
-webkit-shape-outside: polygon(76px 0, 152px 44px, 152px 132px, 76px 176px, 0 132px, 0 44px);
-webkit-clip-path: polygon(76px 0, 152px 44px, 152px 132px, 76px 176px, 0 132px, 0 44px);
shape-outside: polygon(76px 0, 152px 44px, 152px 132px, 76px 176px, 0 132px, 0 44px);
clip-path: polygon(76px 0, 152px 44px, 152px 132px, 76px 176px, 0 132px, 0 44px);
}
.container span {
display:block; 
font:bold 15px/18px arial, sans-serif; 
text-transform:uppercase; 
text-align:center; 
padding:20px 0;
}
.p1 {
left:77px; 
top:0; 
}
.p2 {
left:230px; 
top:0; 
}
.p3 {
left:0; 
top:133px; 
}
.p4 {
left:153px; 
top:133px; 
}
.p5 {
left:306px; 
top:133px; 
}
.p6 {
left:77px; 
top:266px; 
}
.p7 {
left:230px; 
top:266px; 
}
.left {
width: 76px;
float: left;
-webkit-shape-outside: url("hexagon/hex-left.png");
-webkit-shape-margin: 8px;
shape-outside: url("hexagon/hex-left.png");
shape-margin: 8px;
}
.right {
width: 76px;
float: right;
-webkit-shape-outside: url("hexagon/hex-right.png");
-webkit-shape-margin: 8px;
shape-outside: url("hexagon/hex-right.png");
shape-margin: 8px;
}
.panel {width:152px; height:176px; position:absolute; left:0; top:0; overflow:hidden;
-webkit-shape-outside: polygon(76px 0, 76px 88px, 152px 132px, 76px 88px, 0 132px, 76px 88px);
-webkit-clip-path: polygon(76px 0, 76px 88px, 152px 132px, 76px 88px, 0 132px, 76px 88px);
-webkit-transition:0.75s;
shape-outside: polygon(76px 0, 76px 88px, 152px 132px, 76px 88px, 0 132px, 76px 88px);
clip-path: polygon(76px 0, 76px 88px, 152px 132px, 76px 88px, 0 132px, 76px 88px);
transition:0.75s;
}
.container:hover .panel {
-webkit-shape-outside: polygon(76px 0, 152px 44px, 152px 132px, 76px 176px, 0 132px, 0 44px);
-webkit-clip-path: polygon(76px 0, 152px 44px, 152px 132px, 76px 176px, 0 132px, 0 44px);
shape-outside: polygon(76px 0, 152px 44px, 152px 132px, 76px 176px, 0 132px, 0 44px);
clip-path: polygon(76px 0, 152px 44px, 152px 132px, 76px 176px, 0 132px, 0 44px);
}
.p1 .panel {background:url(hexagon/face1.jpg);}
.p2 .panel {background:url(hexagon/face2.jpg);}
.p3 .panel {background:url(hexagon/face3.jpg);}
.p4 .panel {background:url(hexagon/face4.jpg);}
.p5 .panel {background:url(hexagon/face5.jpg);}
.p6 .panel {background:url(hexagon/face6.jpg);}
.p7 .panel {background:url(hexagon/face7.jpg);}

Copyright

You may use this method on your personal 'non-profit' web site without seeking my permission.
A link back to CSS PLAY is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSS PLAY.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced.
Please email me for more information.