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

Change Opacity of Image (Poster) Title Background on Hover


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

Share this post

Link to post

1 answer to this question

Recommended Posts

  • 0

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;


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

OFF to next Tuesday. Please send to email if you have urgently problem.

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