Create Folding Caption Effects Using CSS3

Tuesday, February 12, 2019
Create Folding Caption Effects Using CSS3
Create Folding Caption Effects Using CSS3
Using CSS3 transforms and transitions, we can create cool animations that can make your site more visually appealing





STEP 1: 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.

CODE:
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device- width, initialscale=1.0">
<title>Caption Hover Effects</title>
<link rel="stylesheet" type="text/css" href="css/default.css"/>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<script src="js/modernizr.custom.js">
</script>
</head>

STEP 2: 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)

STEP 3: 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

CODE:
<figcaption> element along with our caption content.
<li>
<figure>
<div><img src="images/music.png" alt="music image"></div>
<figcaption>
<h3>Music</h3>
<span>By Neil Pearce</span>
<a href="#"class="btn_hover">Take me there</ a>
</figcaption>
</figure>
</li>
<li>
<figure>
<div><img src="images/portfolio.png" alt="portfolio image"></div>
<figcaption>
<h3>Portfolio</h3>
<span>By Neil Pearce</span>
<a href="#" class="btn_hover">Take me there</a>
</figcaption>
</figure>
</li>

STEP 4: 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 eff ect on a ‘take me here’ button.

STEP 5: 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.

STEP 6: 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.

CODE:
body, html {
font-size: 100%;
padding: 0; margin: 0;
}
body {
font-family: Arial, sans-serif;
color: #aaaeb2;
background: #f1f1f1;
}
a {
color: #888;
text-decoration: none;
}

STEP 7: 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.

CODE:
.grid {
padding: 20px 20px 100px 20px;
max-width: 1200px;
margin: 0 auto;
list-style: none;
text-align: center;
}
.grid li {
display: inline-block;
width: 440px;
margin: 0;
padding: 20px;
text-align: left;
position: relative;
}

STEP 8: 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.

CODE:
.grid figure {
margin: 0;
position: relative;
}
.grid figure img {
max-width: 100%;
display: block;
position: relative;
}

STEP 9: 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.

CODE:
.grid figcaption {
position: absolute;
top: 0;
left: 0;
padding: 20px;
background: #666666;
color: #ed4e6e;
}

STEP 10: 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 #ff f. You can also experiment by using a <h2> or a <h1>.

CODE:
.grid figcaption h3 {
margin: 0;
padding: 0;
color: #fff;
}

STEP 11: 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.

CODE:
.grid figcaption a {
text-align: center;
padding: 5px 10px;
border-radius: 2px;
display: inline-block;
background: #31a7c4;
color: #fff;
}

STEP 12: 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.

CODE:
.ca-style li {
-webkit-perspective: 1900px;
-moz-perspective: 1900px;
perspective: 1900px;
-webkit-perspective-origin: 0 50%;
-moz-perspective-origin: 0 50%;
perspective-origin: 0 50%; }

STEP 13: 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.

CODE:
.ca-style figure {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.ca-style figure > div {
overflow: hidden;
}

STEP 14: 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.

CODE:
.ca-style figure:hover img
{
-webkit-transform: translateX(25%);
-moz-transform: translateX(25%);
-ms-transform: translateX(25%);
transform: translateX(25%);
}

STEP 15: 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.

CODE:
.ca-style figcaption {
height: 100%;
width: 50%;
opacity: 0;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;

STEP 16: 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.

CODE:
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
transform: rotateY(-90deg);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s;
}

STEP 17: 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.

STEP 18: 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.

CODE:
.ca-style figcaption a {
position: absolute;
bottom: 20px;
right: 20px;
}

STEP 19: 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.

CODE:
.btn_hover:hover {
background: #3fc7e8;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
}

STEP 20: 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.

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

STEP 21: 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.

CODE:
.grid li {
width: 100%;
min-width: 300px;
}
}

STEP 22: 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.
Create Folding Caption Effects Using CSS3 Create Folding Caption Effects Using CSS3 Reviewed by Kamal Thakur on Tuesday, February 12, 2019 Rating: 5
Subscribe to: Posts ( Atom )
Powered by Blogger.