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

CSS for poster text and background?


deaton72

Question

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.

Thoughts? 

 

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

}

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

 

 

Link to post
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Posts

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{

1 answer to this question

Recommended Posts

  • 0

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{
  filter:brightness(40%);
}
/*transition*/
.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 post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...