CSS for Panel Visibility

[Rajesh_Kumar]

Hi all,

I have created a static mashup and where I have an image and two value display widgets. On that mashup, I have placed a panel widget so my image and value widgets went behind the panel. No on the panel I've placed another two value display widgets. See the attachment for better understanding and all the widgets (one image and four value display widgets) are getting data from an infotable. 

Now I want to hide the panel (which means panel and the widgets on the panel) by default and show the widgets behind the panel but when mouser over it, I want to show the panel and its widget.

To do this, need css code. So pls share some codes to complete this.  

[Sugumar_5656 · Accepted solution]

Hi Rajesh,

Use the below code to achieve it.

.test .widget-panel
{
opacity: 0;
}
.test .widget-panel:Hover
{
opacity: 1;
}

Don't forget to mention the custom class as "test" into the attribute field of the panel.

[Rajesh_Kumar]

Thanks @Sugumar_5656 . The code is working great!

[abarki]

Hello Rajesh_Kumar,

If @Sugumar_5656 response has answered your question, please mark it as an Accepted Solution for the benefit of others who may have the same question in the future.

Thank you for your contributions to the PTC Community.

Abarki