Add drop shadow to poster image on hover

Site URL: https://www.fortsferryfarm.com/select-store-page

How do I add drop shadow to poster images on hover on one page only? And is there a way to replace images  with a solid color using css?

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.

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.
 

A sample pic showing both effects.

Let us know how it goes.

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%;
  
  }

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!!!

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

A sample pic showing both effects.

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 ?

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.

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.

WB: arlo.squarespace.com

PW: enter

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.

Sorry - might be blend too much in the background!

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.

OH MY GOD ARE YOU SOME FORM OF WIZARD!!!!

Thankyou!!!