Fluid Engine - List Captions reveal over image on Hover

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; }}

Hi,

That code is for List Section Simple List. In Fluid Engine, you still can add List Section.

When adding a section, choose this, then you can choose List Section