Create BBC iPlayer style roll over boxes

// May 24th, 2009 // Code, css, tutorials

You must have seen those funky roll overs used on the BBC iPlayer website right? I have come up with a very basic way of doing the same thing, not with Javascript but with CSS and HTML.

Step One

First we need to prepare our image, so open your image editor of choice (I am using Fireworks for this example) and create a new canvas with a width of 178px and height of 200px. In the top half of the canvas place an image with a width of 178px and a height of 100px.

step 1

Now we make a copy of the image by selecting it and copying it. Paste it into the lower half of the canvas like below:

step 2

Then we add a black rectangle over the bottom image and reduce it’s opacity to around 80%
image

step 3

Finally add some text

step 4

Step 2 – The Code

Lets start with some really basic and easy mark up

<div class="box">
<div class="content">
<a href="#"></a>
</div>
</div>

and our css…

.box{width:178px;height:200px;}
.box .content a { display: block; width: 178px; height: 100px; background: url(images/heroes.jpg) no-repeat top left;}
.box .content a:hover {background-position:bottom left;}

all we have done is move the bottom half of the image up on the hover state to cover the top half of the image by setting a background position. Easy!

You should get something like this:

3 Responses to “Create BBC iPlayer style roll over boxes”

  1. Jamie Knight says:
    May 25, 2009 at 12:12 pm

    Hiya,

    Its a nice ish method, the only issue is that you are making the content you are brining up totally inaccessible.

    This sort of functionality is best served with progressive enhancement, starting with an accessible base of markup then adding to it as the clients support it.

    Hope that helps, good to see you posting again.

    ^licks^

    Jamie & Lion

  2. John Stephen Jones says:
    May 25, 2009 at 5:11 pm

    A good and valid point Jamie, but i just wanted show people a quick method using hardly any mark up/css to create a javascript-like feature. I shouldn’t have used text though you’re right. It’s a good technique though for images only.

  3. Robin Glen says:
    January 11, 2010 at 5:35 pm

    It is easily made accessible though.

    You could just drop a span in there holding the content and just bump it off screen when the images load.

Leave a Reply