Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
24th October 2013

Create CSS3 folding caption effects

Using CSS3 transforms and transitions, we can create cool animations that can make your site more visually appealing

Create CSS3 folding caption effects

For richer user interfaces it is often desirable to include some animation to make an effect smoother or more appealing – or effects such as rotating elements and text. Traditionally in HTML pages, the primary means to add animations was to use JavaScript to adjust the desired CSS property value over a given period of time. In CSS3, these animations and transformations can be handed off to the browser and defined in the CSS layer using CSS3 transitions and transforms, which are now supported in most of the updated web browsers. Internet Explorer, however, is a little less accommodating with regards to transitions, though thankfully the support is there for IE10.

What we’re going to do in this tutorial is really take CSS transitions and transforms to the next level and combine the perspective property. This is done in order to create some very useful folding animations that you could easily use in your own web design projects. We’re also going to finish off by making our folding effects responsive with an added touch of media queries. So, open up your chosen text editor and let’s get started!

DOWNLOAD TUTORIAL FILES

The HTML

Once you have opened up your chosen text editor, we’re going to create a new file with the HTML5 doctype. Within our head tag we can add in our meta information and links to two CSS files we are going to create, one for our default styles and one for our main styles. Also because we are using HTML5 and CSS3, let’s include Modernizr to detect browser support.

001 <head>
002 <meta charset=”UTF-8” />    
003 <meta http-equiv=”X-UA-Compatible”         content=”IE=edge,chrome=1”> 
004 <meta name=”viewport”             content=”width=device-    width, initial-    scale=1.0”>
005 <title>Caption Hover Effects</title>
006 <link rel=”stylesheet” type=”text/css”     href=”css/default.css” />
007 <link rel=”stylesheet” type=”text/css”     href=”css/main.css” />
008 <script src=”js/modernizr.custom.js”></    script>
009 </head>

Container list

The next step would be to create a containing <div> within the <body> tag and with an unordered list included. So let’s give our containing <div> a class name of ‘container’ and then create an unordered list with four list tags within. We’ll give this list two class names of ‘grid ca-style’ (the ca-style stands for caption animation style)

Images and captions

We now need to populate our list items and we first use the <figure> element. The <figure> element is used to represent a unit of content and in this case, this will be for our caption. We then add the link to our image (which is located in a folder called ‘images’) and then we add the <figcaption> element along with our caption content.

001 <li>
002 <figure>
003 <div><img src=”images/music.png”         alt=”music     image”></div>
004  <figcaption>
005   <h3>Music</h3>
006    <span>By Neil Pearce</span>
007  <a href=”” class=”btn_hover”>Take me     there</    a>
008  </figcaption>
009 </figure>
010 </li>
011 <li>
012 <figure>
013   <div><img src=”images/portfolio.png”     alt=”portfolio image”></div>
014  <figcaption>
015   <h3>Portfolio</h3>
016    <span>By Neil Pearce</span>
017  <a href=”” class=”btn_hover”>Take me     there</    a>
018  </figcaption>
019 </figure>
020 </li>

Finishing up the HTML

Let’s populate the next two list items with the same markup but making sure we change the <h3> tags with the appropriate heading and the image path. We’ve also created a class called ‘btn_hover’ that will be used to create a simple hover effect on a ‘take me here’ button.

Default CSS

In this step, we’ll create a new file and call it ‘default.css’ so we can set some default styles. Firstly we will add the ‘box-sizing’ CSS3 property and the ‘border-box’ value to every element. This will allow us to apply a natural box layout model to all elements and prevent any unnecessary overflows when using percentages.
Body styles
Let’s now set our font to 100% and then make sure all default padding and margins are set to zero. We then set our font style and colour, as well as the background to our document. Last of all, let’s give our links a default colour and make sure there’s no underline.

001 body, html { 
002     font-size: 100%; 
003     padding: 0; margin: 0;
004 }
005 body {
006     font-family: Arial, sans-serif;
007     color: #aaaeb2;
008     background: #f1f1f1;
009 }
010 a {
011     color: #888;
012     text-decoration: none;
013 }

The grid

Now we’ll start working on our unordered list. In Step 2 we gave our list a class name of ‘grid’ and the idea is to have four boxes within a grid-like layout. The class ‘grid’ will work like a container or wrapper for the boxes. We then target our <li> items and give those a fixed width of 440px, making sure they are positioned relative to our grid.

001 .grid {
002    padding: 20px 20px 100px 20px;
003    max-width: 1200px;
004    margin: 0 auto;
005    list-style: none;
006    text-align: center;
007 }
008 .grid li {
009    display: inline-block;
010    width: 440px;
011    margin: 0;
012    padding: 20px;
013    text-align: left;
014    position: relative;
015 }

The figure element

The <figure> element is intended to be used in conjunction with the <figcaption> element to mark up photos, diagrams and code examples, just to name a few. We are going to use this to include our images, setting its position to relative and making sure its maximum width is set to 100%, ready for when we make this responsive.

001 .grid figure {
002     margin: 0;
003     position: relative;
004 }
005 .grid figure img {
006     max-width: 100%;
007     display: block;
008     position: relative;
009 }

Styling the caption

Our caption is going to contain a title, some text (your name) and a simple button. We first set its position to absolute, so we can position it top-left and then give it some padding. We will then give the background a colour and make the text (your name) red. A little later on we will give the caption its height and width.

001 .grid figcaption {
002     position: absolute;
003     top: 0;
004     left: 0;
005     padding: 20px;
006     background: #666666;
007     color: #ed4e6e;
008 }

Caption title

We’ve almost finished the caption by adding the styles to the title. We are going to make sure we clear any paddings or margins and then give it a colour of white by using the hexadecimal value of #fff. You can also experiment by using a <h2> or a <h1>.

001 .grid figcaption h3 {
002    margin: 0;
003    padding: 0;
004    color: #fff;
005 }

Caption button

In this step, let’s finish up our caption by adding in a button. The purpose of the button is to take the user to another page relating to that specific information. So, let’s make sure the text is centred and that we give the button some padding. The button will now resize depending on the amount of text you add in. Everything else should then be relatively straightforward.

001 .grid figcaption a {
002     text-align: center;
003     padding: 5px 10px;
004     border-radius: 2px;
005     display: inline-block;
006     background: #31a7c4;
007     color: #fff;
008 }
009 

Giving it perspective

To activate 3D space, an element needs perspective. There are two ways of doing this in CSS, but we will use the ‘perspective’ property. The value of the ‘perspective’ property determines the intensity of the 3D effect and the ‘perspective-origin’ property allows you to change the bottom position of the 3D element. Do have a play around with these values to see for yourself.

001 .ca-style li {
002     -webkit-perspective: 1900px;
003     -moz-perspective: 1900px;
004     perspective: 1900px;
005     -webkit-perspective-origin: 0 50%;
006     -moz-perspective-origin: 0 50%;
007     perspective-origin: 0 50%; }
008 

Transform-style property

When the ‘transform-style’ property is applied to an element, it determines if that element’s children are positioned in 3D space, or flattened. The default value is ‘flat’ but we want to make sure we tell the browser that we are working in 3D. This is done relatively easily by using the ‘preserve-3d’ value. After that, we’ll make sure that anything that is overflowing is hidden.

001 .ca-style figure {
002     -webkit-transform-style: preserve-3d;
003     -moz-transform-style: preserve-3d;
004     transform-style: preserve-3d;
005 }
006 .ca-style figure > div {
007     overflow: hidden;
008 }

Animating images

Next up would be to animate the images when our caption moves across. Here we can easily do that by using the ‘translateX’ value. The ‘X’ means this will move on the horizontal ‘X’ axis, from left to right. So, if we were to set this a negative value (-25%) then it would move left. In this case, we only want it to move 25% of the parent’s width over to the right, so we use the following code.

001 .ca-style figure:hover img
002 {
003     -webkit-transform: translateX(25%);
004     -moz-transform: translateX(25%);
005     -ms-transform: translateX(25%);
006     transform: translateX(25%);
007 }

Caption visibility

Let’s set the height and width of our caption and make sure we can’t see it by setting the opacity to zero. With 3D transforms, you can rotate an element, so what we would think of as the front, no longer faces the screen. We can accomplish this by using ‘backface-visibility: hidden;’ then set its origin to the left side.

001 .ca-style figcaption {
002     height: 100%;
003     width: 50%;
004     opacity: 0;
005     -webkit-backface-visibility: hidden;
006     -moz-backface-visibility: hidden;
007     backface-visibility: hidden;
008     -webkit-transform-origin: 0 0;
009     -moz-transform-origin: 0 0;
010     transform-origin: 0 0;

Backflip the caption

Now let’s rotate the caption backwards by 90 degrees on the Y-axis, which will make it be flipped towards us. We are then going to set the speed at which it will return back, by using ‘transform 0.4s’ and ‘opacity 0.1s 0.3s’. The next step is where we make all this magic happen by creating a hover state.

001     -webkit-transform: rotateY(-90deg);
002     -moz-transform: rotateY(-90deg);
003     transform: rotateY(-90deg);
004     -webkit-transition: -webkit-transform     0.4s,     opacity 0.1s 0.3s;
005     -moz-transition: -moz-transform 0.4s,     opacity 0.1s 0.3s;
006     transition: transform 0.4s, opacity 0.1s     0.3s;
007 }

Flipping the caption

Without the hover state, none of the CSS we wrote in the last step would mean anything, as the caption hasn’t flipped forward yet – let’s deal with that now. When the cursor hovers over, we want our caption to become visible by setting the opacity to ‘1’ and then rotate forward by 90 degrees at the same speed we set in the last step.

Position the button

Let’s position our ‘Take me there’ button within our caption. Because we positioned the <figure> element as relative, the button can now be positioned anywhere within the caption using ‘position: absolute’. We can position it 20px from the bottom and 20px from the right.

001 .ca-style figcaption a {
002     position: absolute;
003     bottom: 20px;
004     right: 20px;
005 }

Button hover state

We can finish off our button by giving it a nice transition. So on hover the button element is rotated(transitioned) from its default colour to a lighter colour, over two seconds and ‘all’ of its properties can be altered during the transition. After that we can use ‘ease in’ to make a smoother transition.

001 .btn_hover:hover {
002     background: #3fc7e8;
003     -webkit-transition: all 0.2s ease-in;
004     -moz-transition: all 0.2s ease-in;
005     -o-transition: all 0.2s ease-in;
006 }

Responsive grid

We are now going to think about mobile devices and add some media queries to make our grid responsive. We will point to our ‘grid’ class and then set the maximum width to 31.5em. Following this, we want to make sure we have enough padding all around.

001 @media screen and (max-width: 31.5em) {
002     .grid {
003         padding: 10px 10px 50px 10px;
004     }

Responsive images

Now that we have made the containing grid responsive, let’s do the same with our images. We need to target all the ‘li’ items within our grid and set their widths to 100%. After that, we make sure we set a minimum width to 300px. Any less would make the images look too small and vice versa.
001     .grid li {
002         width: 100%;
003         min-width: 300px;
004     }
005 }

Conclusion

Creating animations with CSS3 takes a little bit of time to get your head around, especially when using the 3D properties and values. So, with that in mind, be sure to experiment and see what animations you can achieve through using these new and exciting CSS features.

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • Kacey Coughlin

      Why is there never a demo link? This is web, not print!