Jump to content

poster image hover to hide title

Go to solution Solved by Evamaerketing,

Recommended Posts

Hi
I use the Five template and added a few poster images to one page. The effect I would like is the poster with title+subtitle to be a little darker and on hovering over the image turning normal bright and the title+subtitle disappears. The image should also function as a link.

I managed to setup a hover effect, but I have two problems:
1. Due to the brightness filter on the not hovered image, the title+subtitle are also darker. I would like them to be normal white.
2. Upon hovering the filter clears, but title+subtitle don't vanish.

These are my CSS settings, yet I don't know squarespace's tags:

.sqs-block-image:hover {font-color: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.1); brightness: 100%; transition: .6s;}
.sqs-block-image:not(:hover) {filter: brightness(0.6); transition: .3s;}
.sqs-block-image-link {z-index: 1;}
.sqs-block-title:hover {color: rgba(0, 0, 0, 0.1);}
.sqs-block-title:not(:hover) {z-index: 1;}

On .sqs-block-image:hover font-color or color did not do anything. .sqs-block-title also did nothing.
Any idea what could do the trick? The last resort would be to create a complete new code element, coming at the expense of ease of use.
Thank you all.

Edited by Evamaerketing
Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

  • 8 months later...
4 hours ago, oskarfishwick said:

Hello,

Can you exclude certain image designs? 

I only want this effect on 'Posters"

 

 

If you share link to page where you insert Poster, I can take a look

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.