image overlay fade in text

  • 1
  • Question
  • Updated 5 months ago
  • Answered
Any ideas how I can get overlay text to fade into an image component?

https://www.w3schools.com/howto/howto_css_image_overlay.asp
Photo of Conlan O'Rourke

Conlan O'Rourke

  • 3,280 Points 3k badge 2x thumb

Posted 5 months ago

  • 1
Photo of Sam Alexander

Sam Alexander

  • 80 Points 75 badge 2x thumb
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)

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true">
<models/>
<components>
<grid uniqueid="sk-3wxi-216">
<divisions>
<division behavior="flex" minwidth="100px" ratio="1" verticalalign="top">
<components/>
</division>
<division behavior="fit" verticalalign="top">
<components>
<richtext multiple="false" uniqueid="sk-3_p0-1177">
<contents>&lt;p style="text-align: center;"&gt;&lt;span style="font-size:20px;"&gt;With Template/HTML&lt;/span&gt;&lt;/p&gt;
</contents>
</richtext>
<wrapper uniqueid="sk-3wxg-205">
<components>
<template multiple="false" uniqueid="sk-3wyI-357" allowhtml="true">
<contents>&lt;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'"&gt;&lt;div style="font-size:36px; display:table; margin:0 auto; padding-top:45%"&gt;Click to see markup&lt;/div&gt;&lt;/div&gt;</contents>
</template>
</components>
<styles>
<styleitem type="background" bgtype="image" datasource="Ui-Only" bg-source="url" bg-url="https://www.w3schools.com/howto/img_avatar.png">;
<styles>
<styleitem property="background-size" value="cover"/>
<styleitem property="background-attachment" value="scroll"/>
<styleitem property="background-position" value="center center"/>
<styleitem property="background-repeat" value="no-repeat"/>
<styleitem property="background-color" value="transparent"/>
</styles>
</styleitem>
<styleitem type="border"/>
<styleitem type="size" width="custom" height="custom">
<styles>
<styleitem property="min-width" value="400px"/>
<styleitem property="max-width" value="400px"/>
<styleitem property="min-height" value="400px"/>
<styleitem property="max-height" value="400px"/>
<styleitem property="overflow-y" value="auto"/>
</styles>
</styleitem>
</styles>
<interactions>
<interaction type="tap">
<action type="showPopup">
<popup title="HTML" width="90%">
<components>
<richtext multiple="false" uniqueid="sk-3_sp-1842">
<contents>&lt;p&gt;&amp;lt;div style=&amp;quot;color:white; height:400px; width:400px; transition: .5s ease; background:black; opacity:0&amp;quot; onMouseEnter=&amp;quot;this.style.opacity=&amp;#39;1&amp;#39;&amp;quot; onMouseLeave=&amp;quot;this.style.opacity=&amp;#39;0&amp;#39;&amp;quot;&amp;gt;&lt;/p&gt;

&lt;p&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp;&amp;lt;div style=&amp;quot;font-size:40px; display:table; margin:0 auto; padding-top:45%&amp;quot;&amp;gt;&lt;/p&gt;

&lt;p&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; This is a test&lt;/p&gt;

&lt;p&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp;&amp;lt;/div&amp;gt;&lt;/p&gt;

&lt;p&gt;&amp;lt;/div&amp;gt;&lt;/p&gt;
</contents>
</richtext>
</components>
</popup>
</action>
</interaction>
</interactions>
</wrapper>
</components>
</division>
<division behavior="fit" verticalalign="top">
<components>
<richtext multiple="false" uniqueid="sk-3_pA-1250">
<contents>&lt;p style="text-align: center;"&gt;&lt;span style="font-size:20px;"&gt;With Two Wrappers&lt;/span&gt;&lt;/p&gt;
</contents>
</richtext>
<wrapper uniqueid="sk-3_p8-1232">
<components>
<wrapper uniqueid="sk-3_pF-1279" cssclass="hoverOverlay">
<components>
<richtext multiple="false" uniqueid="sk-3_pL-1307">
<contents>&lt;p style="text-align: center;"&gt;&lt;span style="color:#ffffff;"&gt;&lt;span style="font-size:36px;"&gt;Click to see markup&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
</contents>
</richtext>
</components>
<styles>
<styleitem type="background" bgtype="color">
<styles>
<styleitem property="background-color" value="#205f7e"/>
</styles>
</styleitem>
<styleitem type="border" padding="top,">
<styles>
<styleitem property="padding-top" value="43%"/>
<styleitem property="box-sizing" value="border-box"/>
</styles>
</styleitem>
<styleitem type="size" width="custom" height="custom">
<styles>
<styleitem property="min-width" value="400px"/>
<styleitem property="max-width" value="400px"/>
<styleitem property="min-height" value="400px"/>
<styleitem property="max-height" value="400px"/>
<styleitem property="overflow-y" value="auto"/>
</styles>
</styleitem>
</styles>
<interactions>
<interaction type="tap">
<action type="showPopup">
<popup title="CSS" width="50%">
<components>
<richtext multiple="false" uniqueid="sk-3_t9-1878">
<contents>&lt;p&gt;div.hoverOverlay {&lt;br /&gt;
&amp;nbsp; &amp;nbsp; transition:.5s ease;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; opacity:0;&lt;br /&gt;
}&lt;/p&gt;

&lt;p&gt;div.hoverOverlay:hover {&lt;br /&gt;
&amp;nbsp; &amp;nbsp; opacity:1;&lt;br /&gt;
}&lt;/p&gt;
</contents>
</richtext>
</components>
</popup>
</action>
</interaction>
</interactions>
</wrapper>
</components>
<styles>
<styleitem type="background" bgtype="image" datasource="Ui-Only" bg-source="url" bg-url="https://www.w3schools.com/howto/img_avatar.png">;
<styles>
<styleitem property="background-size" value="cover"/>
<styleitem property="background-attachment" value="scroll"/>
<styleitem property="background-position" value="center center"/>
<styleitem property="background-repeat" value="no-repeat"/>
<styleitem property="background-color" value="transparent"/>
</styles>
</styleitem>
<styleitem type="border"/>
<styleitem type="size" width="custom" height="custom">
<styles>
<styleitem property="min-width" value="400px"/>
<styleitem property="max-width" value="400px"/>
<styleitem property="min-height" value="400px"/>
<styleitem property="max-height" value="400px"/>
<styleitem property="overflow-y" value="auto"/>
</styles>
</styleitem>
</styles>
</wrapper>
</components>
</division>
<division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">
<components/>
</division>
</divisions>
<styles>
<styleitem type="background" bgtype="none"/>
</styles>
</grid>
</components>
<resources>
<labels/>
<javascript/>
<css>
<cssitem location="inline" name="newcss" cachelocation="false">div.hoverOverlay {
    transition:.5s ease;
    opacity:0;
}

div.hoverOverlay:hover {
    opacity:1;
}</cssitem>
</css>
<actionsequences/>
</resources>
<styles>
<styleitem type="background" bgtype="none"/>
</styles>
</skuidpage>
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
Sam,

Nice!  Thanks for sharing!

Bill
Photo of Conlan O'Rourke

Conlan O'Rourke

  • 3,280 Points 3k badge 2x thumb
Sam, your Click to View Markup popup literally made me laugh out loud. 

Awesome, thanks!!
Photo of Conlan O'Rourke

Conlan O'Rourke

  • 3,280 Points 3k badge 2x thumb
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?