Jump to content

Add drop shadow to poster image on hover

Recommended Posts

1 hour ago, SSong said:

How do I add drop shadow to poster images on hover on one page only?

Add the following to Page Settings > Advanced > PAGE HEADER CODE INJECTION for the page.

<style>
  
  .sqs-block-image-figure {
  
    -webkit-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
    
    }
    
  .sqs-block-image-figure:hover {
  
    -webkit-box-shadow: 5px 10px;
    box-shadow: 5px 10px;
    
    }
    
  </style>

You can change the transition duration and box shadow to suit.

Edited by creedon
updated CSS with some vendor prefixes

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
41 minutes ago, SSong said:

And is there a way to replace images  with a solid color using css?

Not sure if this is the effect for which you are looking. Add the following to Page Settings > Advanced > PAGE HEADER CODE INJECTION for the page.

<style>
  
  .sqs-block-image-figure:after {
  
    background-color: rgba( 255, 0, 0, 1 );
    content: " ";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    
    }
    
  </style>

Change the color and opacity to suit.
 

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

You can also combine the two effects if you want them to both happen on hover.

#collection-5f736d7c27fbe866e3e67e49 .sqs-block-image-figure, /* select store page */
#page-5f736d7c27fbe866e3e67e49 .sqs-block-image-figure { /* SHOP lightbox */

  -webkit-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
  
  }

#collection-5f736d7c27fbe866e3e67e49 .sqs-block-image-figure:hover, /* select store page */
#page-5f736d7c27fbe866e3e67e49 .sqs-block-image-figure:hover { /* SHOP lightbox */

  -webkit-box-shadow: 2px 2px 8px #A9A9A9;
  box-shadow: 2px 2px 8px #A9A9A9;
  
  }

#collection-5f736d7c27fbe866e3e67e49 .sqs-block-image-figure:hover::after, /* select store page */
#page-5f736d7c27fbe866e3e67e49 .sqs-block-image-figure:hover::after { /* SHOP lightbox */

  background-color: rgba( 255, 255, 255, 1 ); /* alpha is 0 to 1 */
  content: " ";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  
  }

 

Edited by creedon
version 2 of CSS, extend effect to SHOP lightbox

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
14 hours ago, creedon said:

You can also combine the two effects if you want them to both happen on hover.


.sqs-block-image-figure {

  -webkit-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
  
  }

.sqs-block-image-figure:hover {

  -webkit-box-shadow: 5px 10px;
  box-shadow: 5px 10px;
  
  }

.sqs-block-image-figure:hover:after {

  background-color: rgba( 255, 0, 0, 1 );
  content: " ";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  
  }

 

Wow! Thank you for all your help!!!

Link to comment
On 10/13/2020 at 7:09 PM, creedon said:

A sample pic showing both effects.

1829023259_ScreenShot2020-10-13at4_00_35PM.thumb.png.b9a1cddd4cedc47dada122bf888e64c8.png

Let us know how it goes.

Hi! For some reason the css effect doesn't show up on the "SHOP" lightbox which is what the /select-store-page is for unless I'm actually on the page itself. Could you help me find out how I can still have custom css attached to the lightbox anything plugin from @Omari ?

Edited by SSong
Link to comment

I've updated my previous combined effect CSS. Remove the previous CSS from that page and put the updated CSS in Design > Custom CSS.

5 hours ago, SSong said:

For some reason the css effect doesn't show up on the "SHOP" lightbox

 

On 10/13/2020 at 3:15 PM, SSong said:

How do I add drop shadow to poster images on hover on one page only?

I didn't realize there was a lightbox plugin involved and wrote the effect for one page only.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 2 months later...
On 1/4/2021 at 12:54 AM, MMEbyKiandraTrickett said:

I'm interested in this for this site I'm currently playing around with. The white curved images - I would love to have a cover over aspect.

Could you point us to these white curved images. I'm not seeing them.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
4 hours ago, MMEbyKiandraTrickett said:

Sorry - might be blend too much in the background!

No worries.

This is very general and only a starting point.

Add the follwing to Design > Custom CSS.

#collection-5ff2d5932547c5214a2ffba8 .sqs-block-image-figure {

  -webkit-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
  
  }

#collection-5ff2d5932547c5214a2ffba8 .sqs-block-image-figure:hover {

  -webkit-box-shadow: 2px 2px 8px #A9A9A9;
  box-shadow: 2px 2px 8px #A9A9A9;
  
  }

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 2 weeks later...

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.