Jump to content

Animated hover over image photo filter

Recommended Posts

Hi all - is anyone aware of a plugin (or CSS) that can mimic the image rollover effect on this website:

https://nessakphotography.com/

The image is the first one on the page to the left. It appears there is a photo filter that animates from the left towards the right on hover. I think this is a Wordpress plugin but hoping to find something similar in Squarespace.

Link to comment

They used CSS code to add an overlay effect and move it to left of image + make it hidden.

When user hover it >>> this overlay will run to right.

So I think this is possible to apply to Squarespace.

You can share link to page where you want to affect it on your site, we can test code easier.

image.png.f38fbaf387df5c3565bf34859f919126.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
20 hours ago, LukeDesign said:

Yes, on those images in that section. Most likely will apply to future images. Thank you!

You can use this code to Website > Website Tools > Custom CSS

div#block-8957ab274c4c720bb179 {
a.content-fill:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 101%;
    z-index: 1;
    background: -moz-linear-gradient(left, rgba(226, 175, 166, 0.5) 0%, rgba(226, 175, 166, 0) 100%);
    background: -webkit-linear-gradient(left, rgba(226, 175, 166, 0.5) 0%, rgba(226, 175, 166, 0) 100%);
    background: linear-gradient(to right, rgba(226, 175, 166, 0.5) 0%, rgba(226, 175, 166, 0) 100%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
}
a.content-fill:hover:after {
    right: 0;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
4 hours ago, tuanphan said:

You can use this code to Website > Website Tools > Custom CSS

div#block-8957ab274c4c720bb179 {
a.content-fill:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 101%;
    z-index: 1;
    background: -moz-linear-gradient(left, rgba(226, 175, 166, 0.5) 0%, rgba(226, 175, 166, 0) 100%);
    background: -webkit-linear-gradient(left, rgba(226, 175, 166, 0.5) 0%, rgba(226, 175, 166, 0) 100%);
    background: linear-gradient(to right, rgba(226, 175, 166, 0.5) 0%, rgba(226, 175, 166, 0) 100%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
}
a.content-fill:hover:after {
    right: 0;
}}

 

Amazing! Works perfectly. So much to change the colors to get different effects. Thank you so much!

Link to comment
On 5/5/2024 at 4:14 AM, tuanphan said:

You can use this code to Website > Website Tools > Custom CSS

div#block-8957ab274c4c720bb179 {
a.content-fill:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 101%;
    z-index: 1;
    background: -moz-linear-gradient(left, rgba(226, 175, 166, 0.5) 0%, rgba(226, 175, 166, 0) 100%);
    background: -webkit-linear-gradient(left, rgba(226, 175, 166, 0.5) 0%, rgba(226, 175, 166, 0) 100%);
    background: linear-gradient(to right, rgba(226, 175, 166, 0.5) 0%, rgba(226, 175, 166, 0) 100%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
}
a.content-fill:hover:after {
    right: 0;
}}

 

Hi @tuanphan, is there a way for this to work on a non-gallery block? I want to apply the same effect over a traditional image block. I tried with the code above but it doesn't work, even when I select the lightbox option. Here is the test site with an image: https://www.lucasano.com/test

And here is the code I am using for this image:

div#block-yui_3_17_2_1_1715028469360_214068
{a.content-fill:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 101%;
    z-index: 1;
    background: -moz-linear-gradient(left, rgba(226, 150, 50, 0.5) 0%, rgba(226, 175, 50, 0) 100%);
    background: -webkit-linear-gradient(left, rgba(200, 150, 166, 0.5) 0%, rgba(200, 175, 50, 0) 100%);
    background: linear-gradient(to right, rgba(200, 150, 50, 0.5) 0%, rgba(200, 150, 166, 0) 100%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
}
a.content-fill:hover:after {
    right: 0;
}
}

 

Link to comment

You can use this

div#block-yui_3_17_2_1_1715028469360_214068 {
.sqs-image-content:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 101%;
    z-index: 1;
    background: -moz-linear-gradient(left, rgba(226, 175, 166, 0.5) 0%, rgba(226, 175, 166, 0) 100%);
    background: -webkit-linear-gradient(left, rgba(226, 175, 166, 0.5) 0%, rgba(226, 175, 166, 0) 100%);
    background: linear-gradient(to right, rgba(226, 175, 166, 0.5) 0%, rgba(226, 175, 166, 0) 100%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
    opacity: 1 !important;
}
&:hover .sqs-image-content:after {
    right: 0;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
3 hours ago, tuanphan said:

You can use this

div#block-yui_3_17_2_1_1715028469360_214068 {
.sqs-image-content:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 101%;
    z-index: 1;
    background: -moz-linear-gradient(left, rgba(226, 175, 166, 0.5) 0%, rgba(226, 175, 166, 0) 100%);
    background: -webkit-linear-gradient(left, rgba(226, 175, 166, 0.5) 0%, rgba(226, 175, 166, 0) 100%);
    background: linear-gradient(to right, rgba(226, 175, 166, 0.5) 0%, rgba(226, 175, 166, 0) 100%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
    opacity: 1 !important;
}
&:hover .sqs-image-content:after {
    right: 0;
}}

 

Thank you, @tuanphan. That did the trick. But I am having a glitch with the lightbox. It takes a couple clicks on the image for the lightbox to open up. I have to keep clicking  (vigorously lol) before it eventually opens up. The below link has two images to show you - one with the hover effect and one without. 

https://www.lucasano.com/test

Link to comment
16 hours ago, LukeDesign said:

Thank you, @tuanphan. That did the trick. But I am having a glitch with the lightbox. It takes a couple clicks on the image for the lightbox to open up. I have to keep clicking  (vigorously lol) before it eventually opens up. The below link has two images to show you - one with the hover effect and one without. 

https://www.lucasano.com/test

Use this new code

div#block-yui_3_17_2_1_1715028469360_214068 {
.sqs-image-content:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 101%;
    z-index: 1;
    background: -moz-linear-gradient(left, rgba(226, 175, 166, 0.5) 0%, rgba(226, 175, 166, 0) 100%);
    background: -webkit-linear-gradient(left, rgba(226, 175, 166, 0.5) 0%, rgba(226, 175, 166, 0) 100%);
    background: linear-gradient(to right, rgba(226, 175, 166, 0.5) 0%, rgba(226, 175, 166, 0) 100%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
    opacity: 1 !important;
	pointer-events: none;
}
&:hover .sqs-image-content:after {
    right: 0;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
6 hours ago, tuanphan said:

Use this new code

div#block-yui_3_17_2_1_1715028469360_214068 {
.sqs-image-content:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 101%;
    z-index: 1;
    background: -moz-linear-gradient(left, rgba(226, 175, 166, 0.5) 0%, rgba(226, 175, 166, 0) 100%);
    background: -webkit-linear-gradient(left, rgba(226, 175, 166, 0.5) 0%, rgba(226, 175, 166, 0) 100%);
    background: linear-gradient(to right, rgba(226, 175, 166, 0.5) 0%, rgba(226, 175, 166, 0) 100%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
    opacity: 1 !important;
	pointer-events: none;
}
&:hover .sqs-image-content:after {
    right: 0;
}}

 

That did it! Thank you! 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.