How to Edit Your Image Brightness with a Rollover / Hover Filter

Enhance your images on your Squarespace website through image rollover effects! This effect can be used on any image within your website to add something unique to your overall website design.

In this video I cover:

  • How to use some simple custom code to increase the brightness of your image as you hover over it

  • Different ideas on how to use this feature on your website

Show Notes

0:20 Paste code into Custom CSS

0:33 Editing brightness of hover filter

Copy the custom code from the section below for your site!

img {
transition: all ease-in-out 500ms
!important;
}
img: hover {
-webkit-filter:
brightness (10) !important;
}


The following information was created for use with templates made with Squarespace 7.0.
Stay tuned for more tips and tricks for the new 7.1 platform!


Previous
Previous

Adding Tab Style Buttons onto Images

Next
Next

How to Add Multiple Images at Once