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

poster image hover to hide title

Question

Posted (edited)

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

Share this post


Link to post

1 answer 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;}

Share this post


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