Jump to content

Adding a Drop Shadow to a Picture in an Image Card Block

Recommended Posts

Hey Everyone!

I'm trying to add a drop shadow to an image that is embedded in an image card. I have some custom code I'm using, and it looks really great on the image, but it is also adding the shadow to the text which looks really bad. Any help I could get with adding just the shadow to the image would be awesome! Thanks so much have a fantastic day!

Here's the code I'm using:

#block-3dab5bfd65b7b9ce7990 {
  filter: drop-shadow(15px 15px 5px #a0a0a0);

Link to comment
On 1/9/2022 at 4:40 AM, JuniperDewdrop said:

Hey @tuanphan,

My site is JuniperDewdrop.com

Password: penguin

It's the second image block card on the home page: About Mike

Thanks so much for your help!!

Remove your code & use this new code

div#block-3dab5bfd65b7b9ce7990 .image-inset {
    filter: drop-shadow(15px 15px 5px #a0a0a0);
}

 

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

Hey @tuanphan,

That drop shadow looks really beautiful thanks! 

Unfortunately, I also have some code that makes the button underneath the picture to expand on hover. If you check that out, the animation interferes with the picture drop shadow. Do you have a coding solution for that?

Or would it be better to add a spacer underneath the picture?? Thanks so much! 

Link to comment
On 1/11/2022 at 3:39 AM, JuniperDewdrop said:

Hey @tuanphan,

That drop shadow looks really beautiful thanks! 

Unfortunately, I also have some code that makes the button underneath the picture to expand on hover. If you check that out, the animation interferes with the picture drop shadow. Do you have a coding solution for that?

Or would it be better to add a spacer underneath the picture?? Thanks so much! 

Add to Design > Custom CSS

/* image shadown conflict button */
.image-block {
    position: relative;
    z-index: 9999999999999999999;
}

 

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.