By
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
