Slide Image on Hover using CSS3 | kirupa.com

programming
1

by kirupa | 9 September 2012

One really cool effect that I see used frequently is one where an image seems to be sliding in place when you hover over it using your mouse. If you have no idea about what I am talking about, hover over any of the squares in the below example:

This is a companion discussion topic for the original entry at http://www.kirupa.com/html5/slide_image_hover_using_css3.htm
2

Hello,

Thanks for the tutorial.
I’ve been trying to apply this to my website. Even thought when adapting the images to be responsive (to the screen width) then the height gets messed up.

Do you have any solution regarding keeping the ratio between height and width to achieve the slide effect?

Thanks!

3

Does the information here on how to preserve an image’s aspect ratio help: http://www.kirupa.com/html5/preserve_an_image_aspect_ratio_when_resized.htm ?

If not, can you share an example of what you have implemented right now? That may help me troubleshoot further!

Thanks,
Kirupa :smile: