Jump to content

Gallery page image dropshadow hover

Recommended Posts

Site URL: https://henryfrakesphotography.co.uk/

Hi all! 

Wondering if anyone could advise? I'd really like a bit of animation on the images which appear on the gallery [age, an example being 

https://henryfrakesphotography.co.uk/spain-night-photography

I see a lot changing the fade in, or adding a tint on hover, but I would like something a bit less 'on' the image. Ideally if the image could pop-out slightly and have a drop shadow background?

Or either or would also be great!

Link to comment

Thanks so much worked perfectly 👌 I added a bit of fade to it. I applied to all pages with that layout (6) eg the below. I did it by copy pasting and changing the page IDs, out of interest is there a quicker, better practise for that?  

https://henryfrakesphotography.co.uk/iceland-and-italy-night-photography

https://henryfrakesphotography.co.uk/spain-landscape-photography

https://henryfrakesphotography.co.uk/spain-night-photography

Link to comment
On 7/2/2022 at 6:33 PM, HenryFrakes said:

Thanks so much worked perfectly 👌 I added a bit of fade to it. I applied to all pages with that layout (6) eg the below. I did it by copy pasting and changing the page IDs, out of interest is there a quicker, better practise for that?  

https://henryfrakesphotography.co.uk/iceland-and-italy-night-photography

https://henryfrakesphotography.co.uk/spain-landscape-photography

https://henryfrakesphotography.co.uk/spain-night-photography

Add this to 3 Pages Header

<style>
  .image-block:hover .image-block-wrapper {
    box-shadow: 3px 3px 5px rgba(0,0,0,0.5);
}
</style>

 

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

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.