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.
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:
Learn how to get your Squarespace website (or any Squarespace website) to Google Page 1 using organic SEO techniques!
As a Squarespace Designer & SEO Expert, I know the methodology for truly getting Squarespace websites to rank on Google Page 1, and I’m going to teach it to you!
This course is a self-guided lifetime-access course, so you can go at your own preferred pace and keep it as a resource to return to time and time again.
Please note: This course was created using Squarespace version 7.0. The same principles will still apply with version 7.1, but the overall user interface will look slightly different. Due to the inherent nature of digital products, refunds are strictly prohibited once purchase has been made. Please also note the course cost is $267 in USD currency.
Can you monetize a Squarespace website? Yes, you can. And I’ll teach you how.
Did you know your Squarespace website could be making money for you, even while you sleep, work your day job, or travel?
In this course, which includes over 3 hours of video instruction, I’ll teach you how to use SEO blogging to drive traffic to your site, and then how to monetize those visits.
Please note: This course was created using Squarespace version 7.0. The same principles will still apply with version 7.1, but the overall user interface will look slightly different. Due to the inherent nature of digital products, refunds are strictly prohibited once purchase has been made. Please also note the course cost is in USD currency.
Learn how to turn your basic design knowledge into a functional and successful business!
In this course, I outline the procedures I use to run my Squarespace design business which continues to grow in revenue every single year and has given me wonderful freedom to not only work from home, but to be able to craft my own schedule. Becoming a Squarespace designer changed my life, and I think during these new times we find ourselves in, where so many businesses are having to transition to the online marketplace in order to stay afloat, becoming a self-employed web designer is a really smart move.
Please note:
This is not a design course. Rather, this course assumes you already possess at least a basic understanding of Squarespace design and need guidance on converting that knowledge into a business.
Due to the inherent nature of digital products, refunds are strictly prohibited once purchase has been made.
The course cost is in USD currency
