Sometimes a picture and a role are not enough to completely describe a team member; you need a more detailed description to make your team "real"! But this requires space... and you can gain it using CSS3 transformations. Just give a look at the smart solution found by Aquatilis: the description enters from the side, just like mobile application behaviour, with no need of page reload.

Creating the structure

We created a #cd-team section containing our team members preview:

<section id="cd-team" class="cd-section">
   <div class="cd-container">
      <h2>Our team</h2>
      <ul>
         <li>
            <a href="#0" data-type="member-1">
               <figure><!-- .... --></figure>
               <div class="cd-member-info"><!-- .... --></div>
            </a>
         </li>

         <li><!-- member 2 --></li>

         <li><!-- .... --></li>
      </ul>
   </div>
</section>

For each team member, we created a div.cd-member-bio containing the extended description; we inserted them at the bottom of our content, before the body closing tag.

Adding style

The extended team member description is placed off the canvas by giving it a position:fixed;, a right: 0; and a translateX equals to its width.

.cd-member-bio {
  position: fixed;
  top: 0;
  right: 0;
  width: 270px;
  height: 100%;
  overflow-y: auto;
  /* smooth scrolling on mobile phones and tablets */
  -webkit-overflow-scrolling: touch;
  /* this how we move the author bio section off the canvas */
  transform: translateX(270px);
  transition-property: transform;
  transition-duration: 0.3s;
}

When the user clicks on one of the members' picture, the .slide-in class is added to the div.cd-member-bio using jQuery. This class modifies the translateX value to 0 (the smooth enter is achieved adding a transition to the translation property). The -webkit-overflow-scrolling: touch; is used to smooth scrolling on touch devices (webkit browsers). It's recommended when you use the overflow property.

We gave an overflow-x: hidden; to the body to prevent IE browser from showing a horizontal scrolling bar. We also gave it an overflow: hidden; when the side member bio is visible, so that the out-of-focus content cannot scroll.

Events handling

We assigned a data-type value to each team member preview. When user clicks on one of the team members' picture, the .cd-member-bio, which has class equal to that data-type, is shown.