image wipe/slide on hover

[clairenw]

Hi

Anyone know of some css (not just webkit) to make an image slide OR wipe on mouse hover? Either effect would work for me. I’m trying to keep away from javascript. Also, I’m new to all this so please explain things well :)

Thanks in advance

[Paulie_D]

Slide / Wipe how?

There a multiple ways of doing this….it all depends on what you are trying to do.

Are you talking about a single image or a multiple image slideshow?

[clairenw]

Hi
I have a set of 4 grey-ed out logos. When I hover over each one, I want a full colour logo to show, either by moving (ie sliding), or by revealing (wiping). When I roll off, the logo will go back to the grey version. :)

[Paulie_D]

Hmmm.

You have a couple of things going on there…the slide/wipe and the color change.

2 images would be easiest the way to go. Here’s a few options.

http://codepen.io/Paulie-D/pen/brFgG

I’d have to think about other options….I’d be interested in see the logos (B&W and color).

[clairenw]

Thanks everyone. I found something which worked well for me. I forgot to mention that for each rollover image I use just a single image with one grey logo above the colour logo. Then on rollover I wanted the grey logo to slide up to show the colour logo.

Here’s what I used: http://designshack.net/articles/css/create-five-awesome-hover-effects-using-css-multiple-backgrounds/

I took the rotation example and changed the rotation to a translateY to achieve the effect I was after :)

[Author]

Posts