How TO - Image Overlay Slide

Learn how to create image overlay hover slide effects.

Image Overlay Slide

Learn how to create a sliding overlay effect to an image, on hover:

Example

Slide in (top):

Hello World

Try it Yourself »

Example

Slide in (bottom):

Hello World

Try it Yourself »

Example

Slide in (right):

Hello World

Try it Yourself »

Example

Slide in (left):

Hello World

Try it Yourself »

Go to our CSS Images Tutorial to learn more about how to style images.