Jump to content

Change Opacity of Image (Poster) Title Background on Hover

Recommended Posts

Site URL: http://www.caitlinhutson.com

I have already copied a CSS to change opacity of the overlay on my posters when hovering. The code I used is the following: 

.image-overlay {opacity: 0;
transition: .3s ease;}
    .image-overlay:hover {
      opacity: 1}

It gives the effect of turning the whole block from my image to an opaque green, with the text showing in both.

However, when not-hovering, I added a background color to my Title Text to make it easier to read, and I would like that background to fade out as the opaque green fades in (since the text is very visible on the green without that extra coloring). I tried to use the same format as above but can't figure out what the item is called to make this change. I am looking to do it to all of my posters, so a code that applies to all would be awesome.


Screenshot (20).png

Screenshot (21).png

Link to comment
  • 2 weeks later...
  • Replies 1
  • Created
  • Last Reply

Add to Home > Design > Custom CSS

.design-layout-poster:hover p {
    background: rgb(105,119,85) !important;
    box-shadow: 0.25em 0 0 rgb(105,119,85), -0.25em 0 0 rgb(105,119,85) !important;


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


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.