How to create: image overlay slides

Learn how to create an image overlay hover slide effect.

Image overlay sliding

Learn how to create a sliding overlay effect on images when the mouse hovers over them:

Slide in from above:

Avatar
Hello World

Try it yourself

Slide in from below:

Avatar
Hello World

Try it yourself

Slide in from the right:

Avatar
Hello World

Try it yourself

Slide in from the left:

Avatar
Hello World

Try it yourself

Related pages

Tutorial:CSS image