Jump to content

Fluid Engine - List Captions reveal over image on Hover

Recommended Posts

Hello, I followed a tutorial on how to hide the captions for s simple list and reveal them on hover with CSS but then realized it was outdated since the introduction of the Fluid engine. Is there any fix for this to work on this engine? Here is the code below..

 

(I am still in my trial so cannot link you to the site, as far as I know)

 

section[data-section-id="6419f84125e1cb07a785c48c"] .list-item-content {  margin-top:-77%;  background:linear-gradient(to bottom, rgba(0,0,0,0),rgba(0,0,0,.5) 25%, #000 75%);   padding: 1rem;  transition: all 1s;  z-index:99;  opacity:0}

section[data-section-id="6419f84125e1cb07a785c48c"] .list-item:hover .list-item-content { transition: all 1s; opacity:1}.list-item-content *{color:#FFF!important}

@media only screen and(max-width:640px){section[data-section-id="6419f84125e1cb07a785c48c"]  .list-item-content { opacity:1!important; 
  margin-top:-48%} .list-item-media{ filter:grayscale(0)!important; }}

Link to comment
  • Replies 1
  • Views 212
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Create an account or sign in to comment

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

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