image overlay fade in text

Hey Conlan, I had some success using a wrapper with an image for a background, as opposed to an image component. I did it two ways. For one, I used a wrapper and a template component. For the other, I used two wrappers. Here’s the XML. The click action on the wrappers will only work if you have the most recent Skuid release (11.2)

<p>     <div style="font-size:40px; display:table; margin:0 auto; padding-top:45%"></p>

<p>          This is a test</p>

<p>     </div></p>

<p></div></p>













<p style=“text-align: center;”><span style=“font-size:20px;”>With Two Wrappers</span></p>







<p style=“text-align: center;”><span style=“color:#ffffff;”><span style=“font-size:36px;”>Click to see markup</span></span></p>































<p>div.hoverOverlay {<br />
    transition:.5s ease;<br />
    opacity:0;<br />
}</p>

<p>div.hoverOverlay:hover {<br />
    opacity:1;<br />
}</p>










<styleitem type=“background” bgtype=“image” datasource=“Ui-Only” bg-source=“url” bg-url=“https://www.w3schools.com/howto/img_avatar.png”>;



































div.hoverOverlay {
transition:.5s ease;
opacity:0;
}

div.hoverOverlay:hover {
opacity:1;
}

Sam,

Nice!  Thanks for sharing!

Bill

Sam, your Click to View Markup popup literally made me laugh out loud. 

Awesome, thanks!!

Sam, I’ve implemented this and it is working great in Chrome 67.0.3396.87 on Mac…but getting some odd behavior with scrollbars on Chrome 67.0.3396.99 on Windows…see below

Chrome on Mac

Chrome on Windows

Any ideas what might be happening here?

Try these examples…css image hover