Image hover effects make a website more dynamic, more interactive, and better at catching and holding attention of the visitor.

As you move your cursor on down the page, each time it moves over an image, that image can be made to respond in a number of ways.

The fade out & fade in effect is one of my favorites though, and a great choice for professional websites and those with a modern sleek aesthetic.

I’ve tinkered around to write some code that works not just on regular image blocks, but also for summary grid blocks and for image grid galleries.

This specific code is timed at what I think looks best, but you can make the fade happen faster or slower by adjusting the seconds number.

You can also create this effect in reverse— making photos appear faded/opaque, then turning to full color upon mouse hover. The explanation for that can be found here: Faded To Full Color Hover/Rollover Effect For Images.

Let me know if you have any questions at all, and happy designing!

Make images fade / become opaque upon mouse rollover / hover:

css FADE HOVER effect for regular image blocks:

Copy and paste the following into your Custom CSS box.

/*creates opaque rollover effect for regular image blocks*/
.image-block:hover {
background-color: #00000; opacity: 0.6; transition: all .3s ease-in-out;}

Remove this part if you want the fade effect to happen faster: transition: all .3s ease-in-out;

CSS FADE hover EFFECT FOR IMAGE GALLERY GRIDS:

Copy and paste the following into your Custom CSS box:

/*creates rollover effect on gallery images*/
a img.thumb-image:hover {
background-color: #ff0000 !important;
opacity: 0.8 !important;}

Remove !important and add ;transition: all .3s ease-in-out for slower fade transition.

CSS FADE HOVER EFFECT FOR SUMMARY GRID THUMBNAILS:

Copy and paste the following into your Custom CSS box:

/*creates opaque rollover effect for summary grid thumbnails*/
img.summary-thumbnail-image.loaded:hover {
opacity: 0.2;}

For slower transition time, add ;transition: all .3s ease-in-out right after 0.2;

Also, feel free to play around with the opacity levels by using higher or lower numbers.

I hope this was helpful! Please let me know in the comments if you have any questions.

Talk to you again soon,

x
Tiffany

WELCOME!

Hey there! I’m Tiffany ~ a Squarespace Web Designer & SEO Expert. I design beautiful & professional websites that rank well on Google, & I teach courses on becoming a Squarespace SEO Expert, Monetizing Squarespace, and Starting Your Own Squarespace Design Business!

Feel free to contact me at: tiffany@tiffany-davidson.com

Sign up for a free Squarespace trial here! #afflink

My Courses: