News

Use CSS to build rollover reveal sections

Green Chameleon’s Tom Anderson ‘reveals’ how the attractive and functional content sections on the Studio Indigo site were produced using CSS3-based effects

si04

si04

DOWNLOAD TUTORIAL FILES

Content reveal

For this technique we’ll be looking at the creation of a vertically pushed content reveal section. You can see a similar element in action within the Project Category sections at studioindigo.co.uk, but it basically shows more of the content and hides some of the background image when a user rolls over a ‘Read More’ button. This uses CSS3 transformations and requires no JavaScript. We’re using SASS with Compass here to make life easier, but it could be easily created using pure CSS.

Set up the DOM

We need a button to initiate the hover effect with different text for the normal and hover states. This basically consists of an image with some text that gets shown on hover, as well as some content that rises up to be shown also during hover. You can view a working demo of the effect with the code via Code Pen at: codepen.io/greenchameleondesign/pen/Jwezq

001    <div class=”item-container”>
002        <button>
003            <div class=”button-text”>Read 
More</div>
004            <div class=”button-text”>View 
Project</div>
005        </button>
006        <div class=”item”>
007            <div class=”item-image”>
008                <div class=”item-image-
text”>View Project</div>      
009            </div>
010            <hgroup class=”item-title”>
011                <h2>Item Title</h2>
012                <h3>Sub Title</h3>
013            </hgroup>
014            <div class=”item-text”>
015                <p>Lorem ipsum.</p>
016            </div>
017        </div>
018    </div>

Initial state CSS

In its initial state, the item is a content area with a button that has a fixed height of 11em with the text, aside from the title, hidden. Using the ‘item-image’ class the image is made to fill the remaining space using ‘calc(100% – 11em)’ and ‘background-size: cover’. The button is then positioned at the bottom of the page, ready for the interaction.

001    .item-image{
002            position: relative;
003            height: 75%;
004            height: calc(100% - 11em);
005            background: url(/*YOUR IMAGE*/) 
no-repeat 50% 50%;
006            background-size: cover;
007    }

Interaction on button hover

To trigger the animations on button hover for multiple elements we use the ‘adjacent sibling selector’ (‘+’) between our ‘item-trigger’ button pseudo-classes and the item <div>. We could use JavaScript instead here, but this is a good demonstration of an effective alternative technique:

001    .item-trigger:hover + .item,
002    .item-trigger:focus + .item{
003            // Do stuff to item here
004    }

Animate the item upwards

We move the whole item up vertically using a CSS transformation. As the overflow of the container <div> (‘item-container’) is set to hidden, this will cause the image to be partially hidden. This then provides us with the sufficient room to show the text content:

001    .item{
002        transition: 0.4s ease;
003    }
004    .item-trigger:hover + .item,
005    .item-trigger:focus + .item{
006            @include translateY(-6.5em);
007    }

Show text over image

The text on top of the image is vertically and horizontally centred using Flexbox, CSS3’s Flexible Box Layout Module, with the ‘display:flex;’ property. Its top position (5em) and opacity (1) are animated on hover:

001    .item-image-text{
002                transition: 0.4s ease;
003                position: absolute;
004                top: 0; left: 0; right: 0; 
bottom: 0;
005                display: flex;
006                align-items: center;
007                justify-content: center;
008                opacity: 0;
009    }
010    .item-trigger:hover + .item,
011    .item-trigger:focus + .item{
012                .item-image-text{
013                    top: 5em;
014                    opacity: 1;
015                }
016    }
017

Show text content

With the item moved upwards, we now have the space to show the text content. This is simply an animated opacity change, as the text has always been there,  it was just hidden within the default ‘item-text’ class:

001    .item-content{
002            height: 11em;
003            .item-text{
004                transition: opacity 0.4s ease;
005                opacity: 0;        
006            }
007    }
008    .item-trigger:hover + .item,
009    .item-trigger:focus + .item{
010                .item-text{
011                    opacity: 1;        
012                }
013    }

Show correct button text

Both sets of button text are in the markup within two <div> elements nested inside the button. Using CSS we position the text over each other, but hide the second lot of text using the ‘nth-child(2)’ selector. On hover, we fade out the first lot of text and fade in the second set of text to create a smooth transition effect. Check out the resource CD for the complete set of CSS.

HTML:
001    <button class=”item-trigger”>
002            <div class=”button-text”>Read 
More</div>
003            <div class=”button-text”>View 
Project</div>
004    </button>
005
×