cs5 iconsInDes logoDWlogoILlogoWPlogo
appleemail meLink logoFB logotwitter logo
What we do when we're not working...

We're using this page to showcase the various rollover and onclick mouse events we can utilise to add those nice little touches to your website.

sportshow

Eat, sleep and drink Fitba!

I wanted to use this page to showcase various hover and onclick mouseevents using both CSS3 and jquery. Most of these animation or transitions can be applied to various elements on a website.

This rollover effect was achieved using CSS3 tranformations and transitions. The headline and text are scaled and rotated through different sizes and angles, and the timing durations are set to different values.

The read more button below can be used as a link to another page or another website.

Read More

Run, Forrest, run!

I wanted to also include an onclick show/hide event. With this, I used jquery to gently fade the top image away and fade in the information.

Seve was my hero...

I've used jquery again here to slide/toggle the top image out on the first click and fade the information in from below. The toggle means it goes in the reverse direction on the second click.

musicshow

Wake me up when September ends

This hover effect was achieved using various CSS3 transitions, tranformations and animation. It's quite an effective and striking animation which is great to showcase your images in a pure CSS gallery. The read more button below can link to another page to go into further detail.

Read More
moviesshow

Yo Mr White, Science!

Using CSS3 transitions I've created a bounce effect on hover which can be used on galleries or to add animation to any element you wish to highlight.

barcashow

New York, New York.

CSS3 transformations scale and opacity zoom in the image and make it fade out while bringing the descpription to the front.

www.camdav.co.uk

This flip effect is achieved soley by CSS3 tranformations. Very effective and useful CSS animation especially now as Apple have stopped supporting Flash.

carsshow

The fast and the furious.

This hover effect is achieved by gradually fading the top image away. The headline and text elements can be set to ease in at differing durations.