Welcome to the first EVER web tutorial brought to you by strADegy Advertising in sunny (at least today) Louisville, Kentucky.
Today I want to cover CSS Image Hover Effects; so let’s jump right into it.
The basic premise of the technique we’ll use today is to create a window that will display the top half of an image and hide the bottom half. Once the mouse hovers over the image, the bottom half of the image slides up, pushing the top half out of the visible window and revealing the bottom half.
For this exercise, I put together a graphic that’s 200×400 pixels in total size. As explained above, the top 200×200 pixel half will be initially visible and on-hover the bottom 200×200 will be revealed. Using a single image will save us from having any sort of laggy image loading on the hover event.
I’m going to stick with using the image as a background so we’ll just drop in a div and assign a class to it.
Apologies for the Earth shattering amount of syntax there.
background-position: 0 0;
background-position: 0 100%;
So let’s break that CSS down. We set our window’s height and width to 200×200 pixels. Set the 200×400 pixel image we made earlier as our background image. Set the background image’s position to set against the left wall and the very top wall of our 200×200 pixel window.
The magic of this effect happens when we use the
:hover selector. So we defined that when we hover on the class
.image-swap the backgrounds new position will still be against the left wall but now the image will sit on very bottom on the window, instead of the top. This pushes our background image from resting at the top of the window to resting on the very bottom of the visible window.
Added motion blur to illustrate extreme movement.
The CSS Image Hover Wrap Up
That is all there is to it. Armed with more knowledge and insight, you are now ready to go out and start experimenting with different ways to create your hover effects. The
:hover selector is versatile and can create great visual interest and call outs. Happy coding.