Skip to main content

Any ideas how I can get overlay text to fade into an image component?

https://www.w3schools.com/howto/howto_css_image_overlay.asp

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 style="text-align: center;"><span style="font-size:20px;">With Template/HTML</span></p>





<div style="color:white; height:400px; width:400px; transition: .5s ease; background:#205f7e; opacity:0" onMouseEnter="this.style.opacity='1'" onMouseLeave="this.style.opacity='0'"><div style="font-size:36px; display:table; margin:0 auto; padding-top:45%">Click to see markup</div></div>



https://www.w3schools.com/howto/img_avatar.png">;

























<p><div style="color:white; height:400px; width:400px; transition: .5s ease; background:black; opacity:0" onMouseEnter="this.style.opacity='1'" onMouseLeave="this.style.opacity='0'"></p>

<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