Jump to content

Hover effect on one particular page

Recommended Posts

Hi there,

I have added some code to get the hover effect (overlay + Poster: Title/Subtitle ) on images (see screenshot attached). 

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

Unfortunately it started behaving weirdly - the hover just works on all images now, rather than on only https://www.aeliaandthecamera.com/branding and text is not displayed while hovering over. 
Any advices how to make it work properly are highly appreciated 🙂

Many thanks 🙂
A.

Screenshot 2019-11-15 at 16.27.32.png

Link to comment
  • Replies 2
  • Views 628
  • Created
  • Last Reply

@AeliaandtheCamera " text is not displayed while hovering over." >>> text size is 0%, so you will don't see it.

add to Home > Design > Custom CSS

 

.image-title.sqs-dynamic-text {
    font-size: 15px !important;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...

Archived

This topic is now archived and is closed to further replies.

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