Squarespace CSS Tricks: Make Images Fade In & Out Upon Hover/Rollover

 

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.

[Read: Squarespace CSS Trick: How To “Grow” Images Upon Hover/Mouse Rollover].

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.

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


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.


More Useful Articles:

 

Welcome!


Tiffany Davidson Freelance Squarespace Website Designer Squarespace SEO Expert

I'm Tiffany -
a Squarespace Web Designer & SEO Specialist. 
Here on the blog, I write about Squarespace tips, creative inspiration, art & design, and being self-employed. 
Let me know if there's any way I can help you!



NEED SQUARESPACE HELP?
Please don’t hesitate to reach out to me:


INTERESTED IN A FRESH NEW WEBSITE TO HELP GROW YOUR BRAND?

(You’ll get a 20% discount on the first year of your Squarespace subscription when you pay annually by taking advantage of my Circle Membership)


Tiffany Davidson Freelane Squarespace Website Designer Squarespace SEO Expert Squarespace Help