Use CSS to create animated info boxes

Recreate the impressive pop-out navigation effect found on the The story of Palm Oil site


Recreate the impressive pop-out navigation effect found on the The story of Palm Oil site


inspiration: | GET THE CODE

There’s nothing new about giving your navigation elements some sort of hover effect. The advent of CSS3 simply gave us more effects to utilise, rather than any new ways to use the hovering act itself.

But that’s not to say that there aren’t options for giving our navigation hover effects more function, as well as more gimmicks. What we’re looking to do in this web workshop is to have a series of image-based navigation links with two completely separate hover effects. The first is a simple colour change of the border, but the second is a pop-out tool-tip box with some info about the link itself. Let’s look at the inspiration for this effect.


Structure the page

Our page will be constructed around two distinct areas, a fixed navigation column on the left (#navbar) and the main page area on the right (#main). Within the navbar div, place an unordered list with six empty list elements. In the main div we can put the page title.

001 <body>
002     <div id="navbar">
003     <ul>
004     <li></li>
005     ...
006     </ul>
007     </div>
008     <div id="main">
009     <h1>Do Something!</h1>
010     </div>
011 </body>

Write the body CSS

We are focusing on the navigation elements in this workshop, rather than any page sections, so give the body of our site a fullscreen image background.

001 body {
002     font-family: 'Open Sans', sans-serif;
003     font-size:12px;
004     background: url('images/bg.jpg') no-repeat 50% 50% fixed;
005     background-size: cover;
006     margin:0;
007     }

Continue to the section CSS

We want our navigation column to have a fixed position and occupy the height of the page it sits in. We also want to give it a fixed width, 100px in this case, which we will match with the left padding of the main div area. This is a layout that would need to be readjusted for smaller screens.

001 #navbar {
002     width: 100px;
003     height: 100%;
004     position: fixed;
005     background-color:#369;
006     }
007     #main {
008     padding-left:100px;
009     }

Place navigation icons

You will need six PNG icons to use for your navigation elements. Ours have been obtained from, all connected with a type of activity. Place each icon within an <a> link, within each list element. There are six in all, as with the example below. Add the CSS for the unordered list, setting it tidily within the navigation column.

001     <li>
002         <a href="#">            
003 <img src="images/streetsign.    png" alt=""/>
004         </a>
005 </li>
006 ul {
007         list-style-type:none;
008         padding-left:17px;
009         margin-top:50px;            
010         }

Style the nav elements

Now we can apply the styling needed to arrange them. Each should be given a circular border-radius and base colour for the border. Width and height can be fixed, with padding and text-align properties keeping the images central. The relative positioning comes into play when the pop-out boxes are added in the next section.

001 li {
002        position:relative;
003      border: 2px solid #eee;
004     border-radius: 50%; 
005        padding: 10px;            
006        width: 40px;
007        height: 40px;
008        text-align: center;
009        margin: 10px 0;
010        transition: border 0.2s ease-in;
011 }


Add a div element

Put in the new div with the class activebox that sits within the <li> tag, but not the <a> tag. Add an inline display:none property. Give it a title and some blurb.

001 <li>
002     <a href="#">        
003     <img src="images/    streetsign.png" alt=""/>
004     </a>
005     <div class="activebox"     style="display:none;">
006     <h2>Go for a Walk</h2>
007     <p>Lorem ipsum.</p>    
008     </div>
009     </li>

Change hover properties

Let’s change the border colour of the icon on hover with added CSS easing. The activebox elements must be absolutely positioned, to enable them to align with relative icons, and adjusted to sit in line with the navigation column.

001 li:hover {
002     border: 2px solid #fe000a;    
003     transition: border 0.2s ease-in;
004     }
005     .activebox {
006     position: absolute;
007     width: 300px;        
008     top:0;
009     left:70px;            
010     padding:10px;
011     background-color:#369;    
012     color:#fff;
013     border-top-right-radius:30px;
014     border-bottom-right-radius:30px;
015     }

The JavaScript

Toggle the display state of each activebox element so that it has a fade-in when the matching icon is hovered over. Using ‘$this’ ensures that only the corresponding element is displayed.