News

Use CSS3 transitions to create portrait rollovers

We take a look at how Rally Interactive’s rollover team portraits are formed on its brand new beta website

RallyRollover

We take a look at how Rally Interactive’s rollover team portraits are formed on its brand new beta website

RallyRollover


GET THE CODE FOR THIS TUTORIAL

Start with the markup

The set of team portraits on the Rally site are arranged in a grid of ten using <div> elements setup as ‘column-items’ with position and size set responsively with media queries. Each ‘person’ object consists of a container <div> with a unique id based on name, with two subsequent <div> elements nested inside holding an <h3> name label and a <span> label for person’s job title like so:

001 HTML:                
002 <div class="column-item person" id="person-id" onclick="">    
003 <div class="column-item-content">
004 <div class="person-details">    
005 <h3 class="person-name">Person Name</h3>                                
006 <span class="person-title">Person Title 1 / <br>Person Title 2</span>    
007 </div>                            
008 </div>    
009 </div>    

Column item classes

A combination of ‘column-item’ classes are used to set basic positioning for the first and second <div> elements. For illustration purposes of showing just a single portrait rollover, width and height is set to the actual size of our example portrait photo. On the site, Rally set this to a percentage in combination with a bottom-margin before using media queries to make the grid of portraits more responsive.

001 CSS:                
002 .column-item {    
003 float: left;
004 position: relative;
005 width: 280px;            
006 height: 280px;            
007 }                    
008 .column-item-content {    
009 position: absolute;            
010 top: 0;                
011 left: 0;    
012 right: 0;
013 bottom: 0;
014 cursor: default;            
015 }

Add the person portrait

The portrait photos are 280 x 280px in size and are applied to the main containing <div> as a background image. Each person in the team therefore has a #person-id class where ‘id’ is instead a unique first name. A ‘.person{}’ CSS class then sets the position, repeat, size and tap-highlight-color for all of these individual JPG people shots:

001 .person {                
002 background-position: center center;
003 background-repeat: no-repeat;
004 background-size: cover;
005 -webkit-tap-highlight-color:     transparent;                
006 }                      
007 #person-id{                
008 background-image: url(portrait.    jpg);                      
009 }

                    

Transition the opacity state

The next few classes attach some important properties for hiding and showing the rollover details the way we require. The transition property is important for delaying the opacity change to ‘1’ on hover and reverting back to ‘0’ after hover. It is this that causes the subtle fading that makes the rollover effect smoother. We then observe a pseudo-class inserted ‘before’ the column-item-content element for controlling label positioning, while the hover class simply sets opacity to fully visible:

001 .person .column-item-content {    
002 text-align: center;    
003 background: #2f363b;
004 opacity: 0;
005 -webkit-transition: opacity 500ms;    
006 transition: opacity 500ms;        
007 }                    
008 font-size: 120%    
009 }                    
010 .person .column-item-content:before {                    
011 content: "";    
012 display: inline-block;
013 height: 100%;
014 vertical-align: middle;        
015 width: 1px;                
016 margin-right: -4px;            
017 }    
018 .person:hover .column-item-content{opacity:1;}

Float the text

A ‘person-details’ class styles the container <div> for the <h3> and <span> labels. We’ve added Montserrat (Google Fonts) due to its resemblance to the site’s typeface, and set the text white. Beyond positioning and width, the translate3d() shifts the element by ten pixels. Setting the transition again to 500ms and removing the transform on hover creates the subtle movement:

001 .person-details {             
002 font-family: 'Montserrat', sans-    serif;                     
003 color: white;             
004 display: inline-block;        
005 vertical-align: middle;         
006 width: 90%;                
007 -webkit-transform:translate3d(0,10px,0);            
008 transform: translate3d(0,10px,0);    
009 -webkit-transition: 500ms;        
010 transition: 500ms;             
011 }                     
012 @media (min-width: $mq-large) {     
013 max-width: 50em            
014 }                     
015 .person:hover .person-details {    
016 -webkit-transform: none;        
017 transform: none;            
018 }

Last label formatting

Finally we have the classes for styling the person-name and person-title elements that contain these text labels. Here particular aspects like font size, word/letter spacing, line height and positioning are defined – in line with the format of the overall design. Save and preview to see the rollover.

001 .person-name {             
002 font-size: 25px;             
003 text-transform: uppercase;        
004 word-spacing: 99px;            
005 letter-spacing: -1px;         
006 line-height: 1;            
007 padding-top: .25em;            
008 }                    
009 .person-title {    
010 font-size: 10px;
011 font-weight: 400;
012 display: block;            
013 margin: 0 auto;            
014 }
×