<style>
.team {width:100px; height:100px; position:relative; margin:200px auto;}
.team input {position:absolute; display:none;}
.team .segment {width:100px; height:100px; position:absolute; left:0; top:0; z-index:10;
transform-origin:50px 50px;
transition:0.5s;
}
.team .information {position:absolute; left:-9999px; width:100%; top:230px; text-align:center; opacity:0;
transition: opacity 0.5s 0.6s;
}
.team .segment label {display:block; width:100px; height:100px; background-size:contain; background-position:center center; 
background-repeat:no-repeat; cursor:pointer; border-radius:7px;
transition:0.5s;
}
.team .segment:nth-of-type(1) label {background-image:url(face1.jpg);}
.team .segment:nth-of-type(2) label {background-image:url(face2.jpg);}
.team .segment:nth-of-type(3) label {background-image:url(face3.jpg);}
.team .segment:nth-of-type(4) label {background-image:url(face4.jpg);}
.team .segment:nth-of-type(5) label {background-image:url(face5.jpg);}
.team .segment:nth-of-type(6) label {background-image:url(face6.jpg);}
.team label.center {display:block; width:100px; height:30px; padding-top:70px; background:#f0f0f0 url(study.png) no-repeat center 10px; 
position:relative; z-index:20; cursor:pointer; text-align:center; font:normal 16px/25px 'texgyreadventorregular', arial, sans-serif; color:#000; 
border-radius:5px;}
.team #toggle:checked ~ .segment:nth-of-type(1) {left:120px;}
.team #toggle:checked ~ .segment:nth-of-type(2) {left:65px; top:-120px;}
.team #toggle:checked ~ .segment:nth-of-type(3) {left:-65px; top:-120px;}
.team #toggle:checked ~ .segment:nth-of-type(4) {left:-120px;}
.team #toggle:checked ~ .segment:nth-of-type(5) {left:-65px; top:120px;}
.team #toggle:checked ~ .segment:nth-of-type(6) {left:65px; top:120px;}
.team #toggle:checked ~ input:checked + .segment {width:340px; height:340px; left:-120px; top:-120px; 
background:#f8f8f8; border:1px solid #ddd; border-radius:8px; box-shadow:0 15px 10px -15px rgba(0,0,0,0.6); z-index:100;}
.team input:checked + .segment label {width:200px; height:200px; margin-left:70px; margin-top:10px; 
box-shadow:0 15px 10px -15px rgba(0,0,0,0.6);}
.team input:checked + .segment .information {left:0; opacity:1;}
.team h6 {font:normal 18px/25px 'texgyreadventorbold', arial, sans-serif; color:#000; padding:0; margin:0;}
.team p {font:normal 15px/25px 'texgyreadventorregular', arial, sans-serif; color:#333; padding:0; margin:0;}
</style>
<div class ="team">
    <input id="toggle" type="checkbox">
    <input id="staff1" type="checkbox"><div class ="segment"><label for="staff1"></label><div class ="information">
<h6>Dr Terry Smith</h6><p>Head of Department Graphics, Art &amp; Media</p></div></div>
    <input id="staff2" type="checkbox"><div class ="segment"><label for="staff2"></label><div class ="information">
<h6>Ms Pauline Jones</h6><p>Head of Department, Fashion and Textiles</p></div></div>
    <input id="staff3" type="checkbox"><div class ="segment"><label for="staff3"></label><div class ="information">
<h6>Mr William Freeman</h6><p>Deputy Head of the College of Engineering </p></div></div>
    <input id="staff4" type="checkbox"><div class ="segment"><label for="staff4"></label><div class ="information">
<h6>Dr Sarah Smile</h6><p>School Business Manager</p></div></div>
    <input id="staff5" type="checkbox"><div class ="segment"><label for="staff5"></label><div class ="information"><h6>Mrs Mollie Watson</h6><p>Associate Professor in Astronomy</p></div></div>
    <input id="staff6" type="checkbox"><div class ="segment"><label for="staff6"></label><div class ="information"><h6>Mr Brian Charles</h6><p>Senior Lecturer in Biological Physics</p></div></div>
    <label for="toggle" class ="center">OUR TEAM</label>
</div>