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
  • Views 1.4k
  • Created
  • Last Reply

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.