Jump to content

Image Block hover Overlay CSS

Go to solution Solved by tuanphan,

Recommended Posts

1 hour ago, AndrewDurand said:

Hi,

I am trying to add a simple overlay on certain image blocks (that have text on top) in Fluid Engine. I would like the overlay to be a simple color or gradient effect on hover. 

Similar to the image hover effects seen here: https://www.ulaval.ca/en

anyone know of any code to achieve this?

Thank you 🙂 !!

Can you share your site with the protected password so I can take a look?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
On 7/29/2022 at 12:59 AM, AndrewDurand said:

Hi bangank,

The URL: https://oriole-panda-2fhm.squarespace.com/

PW: dialogue

I am trying to get a hover overlay on the image blocks in the "our partners" section. and an overlay on the images in the background. 

Thanks!

Add to Design > Custom CSS

/* Our Partners Image Overlay */
.fe-62deaf4c2e56eb135c4488ed .content-fill:after {
    content: "";
    position: absolute;
    background-color: rgba(0,0,0,0.5);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    transition: all 0.3s;
}
.fe-62deaf4c2e56eb135c4488ed .image-block:hover .content-fill:after {
    opacity: 1;
    transition: all 0.3s;
}

image.thumb.png.1542541fad8b750a6c5e2dcb2b8cae6a.png

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

Thank you!

This worked well 🙂

So you are targeting certain elements with this>> (where did this come from, its not the section ID?)

.fe-62deaf4c2e56eb135c4488ed

Then told it to fill content with opacity 0?

 

.content-fill:after 

and then change the opacity of the "fill" when you hover over image blocks?

 

.fe-62deaf4c2e56eb135c4488ed .image-block:hover .content-fill:after

Just trying to understand!

Thank you for your help.

Link to comment
  • Solution
On 7/31/2022 at 9:47 PM, AndrewDurand said:

Thank you!

This worked well 🙂

So you are targeting certain elements with this>> (where did this come from, its not the section ID?)

.fe-62deaf4c2e56eb135c4488ed

Then told it to fill content with opacity 0?

 

.content-fill:after 

and then change the opacity of the "fill" when you hover over image blocks?

 

.fe-62deaf4c2e56eb135c4488ed .image-block:hover .content-fill:after

Just trying to understand!

Thank you for your help.

It is similar section id. You can also use data-section-id instead.

image.thumb.png.d2d225727d460ac271ba77c28dcc1899.png

and

image.thumb.png.c2c2cc5950598d7951225c7434acef20.png

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
On 8/8/2022 at 2:36 AM, Ricebunny42 said:

Hi,

Thank you for this code I've been looking everywhere for one that works with fluid engine! Is there a way to also add text when you hover over the image? I'm also trying to add a subtle zoom in on my images when hovering as well if possible.

Thank you!

If you use Fluid Engine, each case will need a different code. If you use Classic Editor Image Block, this will achieve easier.

You can add Image, text over image, then share link to page on your site, we can check & give the code

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

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.