Jump to content

CSS for poster text and background?

Recommended Posts

Site URL: https://corn-apricot-zn88.squarespace.com/portfoliodetails/8yypiklex23co21rpmxwqtxrbmliw4

I have tried all the examples here. I have code to make the text overlay appear on hover, BUT the background of the box is white, I would like it to be about .7 opacity. No matter what I try, it won't change. I feel like I am missing something simple. 

This is what I have: 

Issues: whole overlay (text and background) are .5 opacity. I'd like the text to be .1.

Also, the colors are the opposite if what we want - we want white lettering on translucent black bkgd.  When I tried to just change them using the 7.1 color change, the background NEVER goes to #000000.



.design-layout-poster .image-card-wrapper 
  visibility: hidden;


.design-layout-poster:hover .image-card-wrapper {
  visibility: visible;
  opacity: .5;



Link to comment
  • Replies 2
  • Views 1.6k
  • Created
  • Last Reply

Hi Deaton,

Your site is currently password protected.

I posted this code to a similar question - it was built for poster image blocks.

/*rollover image effect*/
.image-block figcaption{
  opacity: 0;
/*on hover*/
.image-block:hover figcaption{
  opacity: 1;
.image-block:hover img{
.image-block figcaption, .image-block:hover img, .image-block img, .image-block:hover figcaption{
  transition: .5s;

Let me know if this is close to what you were after, I can tweak the code if not.

Link to comment
  • 8 months later...


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.