[Free Share] Custom Gallery Hover Effect Generator

Hi my friends,

Today I gonna share a solution I used to customize the hover effect on Gallery Section (on 7.1 template). There are several steps to follow and finally you got a custom hover effect on caption enabled grid gallery section.

Access to this page for the step-by-step instruction to copy and paste the final code into your code injection, it will work site-wide, page specific or section specific

https://beyondspace-showcase.squarespace.com/gallery-hovers

Note: This solution is specifically for applying the caption animation, you want to implement your own stylesheet to modify the caption style such as responsive, font style and color...etc

Select Hover effect

1. Choose an Effect
   Select a hover effect from the "Effect Categories" panel. Adjust the "Effect Type" for more customization.

2. Preview the Style
   Use the "Preview" section to see how the hover effect looks with your selected settings.

3. Customize Colors
   Modify the "Color Options" to match your site's design.

4. Copy the Code
   Once satisfied, click Copy Code to generate the required Code Injection snippet.

5. Add to Squarespace
   Paste the copied Code Injection into Footer Code Injection of your Squarespace website.

1 hour ago, SST said:

@bangank36 this looks amazing. is there a simple version as well for 7.1 ?
i mean...just on mouse over the colour 50% and text caption?
and any chance to make this work for video blocks?

Would love to know if that could work.

This is your 7.1 gallery section, what your asking can be achieved, you can post as new topic for other contributor to help having a look

24 minutes ago, SST said:

@bangank36 a bunch of these already online....no REPLIES or solutions...
It would be amazing if this could work out somehow.

10 unsolved issues and more ... searched like a bunch of other all over the forum.
 

 

 

Sorry, this topic is used for specific purpose to share the hover effect for gallery section

Hi @bangank36

I'm trying to install your code on my site but I think I need a little assistance, if you can help...

https://ascot-signs.squarespace.com/ 

Password - ASCOTSITE

Here is the gallery I'm trying to affect (the 3 images that rest above the footer):

On 2/15/2022 at 7:44 PM, PartTwoDesign said:

Hi @bangank36

I'm trying to install your code on my site but I think I need a little assistance, if you can help...

https://ascot-signs.squarespace.com/ 

Password - ASCOTSITE

Here is the gallery I'm trying to affect (the 3 images that rest above the footer):

 

Make sure that the code js is wrapper with <script></script>

Let me know how it works

Hi @bangank36

Thanks I've added the script tags. Please can you help with step 4? I've pasted the html into the description of the first image (B+W factory shot) but I don't think I've done this correctly.

Appreciate the help!

Thanks,
Anna 

On 2/18/2022 at 8:46 PM, PartTwoDesign said:

Thanks I've added the script tags. Please can you help with step 4? I've pasted the html into the description of the first image (B+W factory shot) but I don't think I've done this correctly.

Appreciate the help!

Thanks,
Anna 

Have you solved it yet?

Hi @tuanphan 👋

No not yet, if you can help that would be fantastic...

https://ascot-signs.squarespace.com/ 

Password - ASCOTSITE

@tuanphan @bangank36 

Can you help me out with this? Greatly appreciate the guidance! 

Thanks,
Anna 

Hi @tuanphan I have since found alternative code which works well for these bottom 3 images (Grid Strips Gallery Section) - https://ascot-signs.squarespace.com/projects 

Currently, these images go completely black on hover, however I would just like the images to darken on hover similar to what I've achieved on the Summary Block on the Projects page: https://ascot-signs.squarespace.com/projects

I know it's just a case of tweaking the code I have, if you can advise? 

Thanks!
Anna 

16 hours ago, PartTwoDesign said:

@tuanphan @bangank36 

Can you help me out with this? Greatly appreciate the guidance! 

Thanks,
Anna 

After applying my code, have you enable the caption on gallery design?