Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Add drop shadow to poster image on hover


SSong

Question

  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

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:

A sample pic showing both effects. Let us know how it goes.

Posted Images

7 answers to this question

Recommended Posts

  • 1
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

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 1
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.
 

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 1

A sample pic showing both effects.

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

Let us know how it goes.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 1

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

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0
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 post
  • 0
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 post
  • 0

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.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...