Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196

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



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, 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:

001    <div class=”item-container”>
002        <button>
003            <div class=”button-text”>Read 
004            <div class=”button-text”>View 
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    }

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.

001    <button class=”item-trigger”>
002            <div class=”button-text”>Read 
003            <div class=”button-text”>View 
004    </button>