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

poster image hover to hide title

Go to solution Solved by Evamaerketing,


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 post
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

3 answers to this question

Recommended Posts

  • 0

Someone helped me solve it:

.sqs-block-image:hover { brightness: 100%; transition: .6s; cursor: pointer;}
.sqs-block-image:not(:hover) img { filter: brightness(0.3); transition: .3s;}
.sqs-block-image:hover .image-card-wrapper { display:none;}

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