Jump to content

Image Block Poster Hover (instances only - NOT all)

Recommended Posts

Is it possible to assign the same code to a single page or section within a site and not ALL instances? I am wanting to have a few image blocks on the homepage have a hidden hover in one color, but have the same code on a different page with another color and hidden hover. Is that possible? Below is the code I have thus far (which is applied to ALL instances of the poster image block..)

 

/* Image poster hover */
.design-layout-poster:hover .image-card-wrapper {
  visibility: visible;
  opacity: 1;
  background-color:#37C578;
}

 

Link to comment

You can add this code to Homepage Header (Hover Homepage in Pages > Main Navigation or Not Linked > Click Gear icon > Advanced)

<style>
  /* Image poster hover */
.design-layout-poster:hover .image-card-wrapper {
  visibility: visible;
  opacity: 1;
  background-color:#37C578;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 months later...
On 5/16/2022 at 12:41 PM, mwinn3 said:

/* Image poster hover */
.design-layout-poster:hover .image-card-wrapper {
  visibility: visible;
  opacity: 50%;
  background-color:#0074c8;
}

 

@tuanphan  First I have to say your responses have been so helpful!

This code above worked perfectly for what I need on a poster image. I changed the opacity/colour to 60%. However, the title also changes opacity. Is there a way to tweak the code to keep text 100% white?

Screen Shot 2022-09-11 at 12.31.31 PM.png

Edited by knghem
Link to comment

I was able to solve it!

.design-layout-poster .image-card-wrapper {
  visibility: visible;
  opacity: 1;

}
.design-layout-poster:hover .image-card-wrapper {
  visibility: visible;
  opacity: 1;
  background-color:hsla(205, 100%, 39%, 0.60);
  transition-duration: 0.35s;
}

Screen Shot 2022-09-11 at 3.25.50 PM.png

Edited by knghem
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.