Tags: HTML CSS3 Intermediate
There's a current trend sweeping the net right now, especially on mobile device concepts I've seen that replicates this effect. I thought it would be a nice way to spend a Saturday afternoon by working out how you'd do it in purely CSS.
Disclaimer: This should validate in HTML4.01, but given the CSS3 functions evident here I'd say you're looking at HTML5 and only modern browsers. I've tested this in Chrome, Safari and Firefox and it works just fine. But I'm guessing that only IE9 and 10 will even attempt this... basically you're gonna have to do the hard work there if you want to take this further ;)
Here's an example of what we're going to look at. Hovering each image here will move the image up in a folded paper style action, to reveal a tag underneath. Well deal with a slightly simpler version for this demo (ie, without the wood effect background, just to make it more manageable).
There's also a whole bunch of box-shadow effects going here to do the depth effects, shadows and multi-stroke borders. But don't panic yet! I'll explain all.
For the sake of this example, I'm going to be breaking this down on ONE IMAGE ONLY. Once we've got the code for that worked out we can duplicate it into multiple sets. Let's call this "crawling before we can walk".
The principle here is that we're wrapping a
<a href> tag around a set of three
<span> elements. These Spans will be what animates. Why not DIVs? Because HTML 4.01 will not allow BLOCK elements inside an INLINE element. However, HTML5 will allow this. So if you're working this into a HTML5 page, DIVs might make more sense when reading the code back. Your choice.
So, enough waffle already! Let's create the HTML:
Now we add some classes...
we'll create these CSS classes in the next step, but to clarify; these are the classes that will control the wrapper for the image and each of the individual folds.
Finally lets add the label that the Image is going to reveal...
Now lets look at the CSS
Now we're going to build the CSS classes that control this effect. The first block is what controls the wrapper and background images for the
At this point we're creating an inline element so it flows left to right inline like the example block above. You could achieve the same effect with BLOCKs and FLOATs.
We're also establishing how the child elements should animate in the page.
Now we're going to create the three classes that control the image slices for the folds.
Each of the folds needs to have slightly different effect applied to them to help enhance the 3D effect. The top fold has a bright gradient highlight, the middle is darkened as if the shadow from the top fold is being cast over it and the bottom fold has several
box-shadow effects applied to it to help with the depth.
For the hover effect we're going to add
scale(). At this point however we'll be purely putting the hooks in for that effect.
Firstly, create a set of classes which all have the following values. These will be picked up by each
<span> and it's much more efficient to group these together.
Having done this, we're going to set the individual values for each fold
Firstly, we need to work out what a third of our intended image height is. In this case I've chosen a nice
250px value. Unfortunately this doesnt split into three well. Oh well, Maths never was my strong point, right? So what we're left with is a top and bottom fold of
67px and a middle fold of
Now we have the default states set, you should see the block as a single correct image *yay*. So now we need to add the hover effects. This is going to be triggered by hovering the
<a> wrapper. Basically what's happening here is that when you're hovering the
<a> the CSS is setting a value change on the child elements
.partOne etc. Doing it in this way ensures that the transition animations have something to go from and to. You could achieve the efect by swapping classes with jQuery, but you'd lack the CSS animations, and hey, it would involve adding unnecessary jQuery overheads.
Having set up blank
scale() values in the parent class, now we're going to swap those for some real values and apply the affect.
The top and Bottom folds will transform the same way, the middle acting in a mirror image. Because the
perspective() effect changes the relative size of the top and bottom of each slice, we'll need to apply the
scale() attribute to fix this. Mainly i found this was a trial and error value, ie I just played around until it looked right. But what you're looking for is that the top of fold one is the same width hovered, as in the unhovered state.
We also need to shift the
top value to account for this shifting. Again, I played around with the values on each fold until they matched up correctly.
Finally we need to add the class that's going to style our image label:
And that's it! hopefully your image will now animate with a groovy fold effect and will look like the example here:
The code so far is just dealing with a single image example. But in reality that's not really practical. Most people will want to have a set of images that this applies to. We need to make some simple changes to make this happen
Firstly we need to REMOVE the
background-image element from the
.partOne, .partTwo, .partThree classes.
Then we need to add image specific classes to the HTML. This allows us to build each individual element separately. In the example at the top of the page, I have six images, so lets add six unique classes to reflect that. I'm calling them
.imgSix. Place them after
Now to add the extra CSS. This is done in blocks which require the new controlling class of
.imgSix to influence all three of the fold
The great thing about this method is that you don't have to create crazy jQuery to handle each individual hover state, the CSS does that for you. It's a fantastically lightweight way of approaching it.
OK, so the obvious flaw in this approach is that only absolutely modern browsers will run it. CSS3 webkit is fine for fun things like this, but how about using this in anger on a site viewed by all browsers? Well, technically this should degrade gracefully enough so that even though it's not animating and added the 3D effect, it should shift the images up so you can see the image label. (but it should be noted that the box-shadow effects I'm using to create multi-stroke borders will not show either).
Hopefully it won't be long before the web in general catches up with CSS3 properly, the latest versions of Internet Explorer are showing promising signs!
Hope you dig this, feel free to ask me any questions or send feedback using the form below, or if you use it, please link me your results!
Ian. June, 2012