The Grid Custom Skin keep titles up without hover

[blockofjoy]

I’ve built a custom skin using The Grid plugin. Currently I have it set so when you hover over the image it will reveal the Media Content layer (Title, Tags, and Buttons along with a semi-transparent overlay) over the original Media Layer. What I would like to do is have the Title and Tags remain visible regardless of hovering over it or not, primarily to accommodate mobile users. I’ve tried playing with each element’s visibility options and other settings, but nothing seems to work. Am I missing something?

You can see the custom grid I built on our home page: blockofjoy.com

[ruenel]

Hello There,

Thanks for writing in! Do you want something like this?

You can make use of this custom css code in your custom skin:

.tg-originals div.tg-item-media-content,
.tg-originals div.tg-item-media-content * {
    opacity: 1;
    visibility: visible;
}

We would loved to know if this has work for you. Thank you.

[blockofjoy]

This works, however it’s not quite what I’m looking for.

I was hoping to get it so all the text remain visible but the semi-opaque overlay and buttons shows up only on hover. Is this possible?

[ruenel]

Hello There,

You may need to update the given code and use this instead:

.tg-originals div.tg-item-media-content .tg-center-holder * {
    opacity: 1;
    visibility: visible;
}

Please let us know if this works out for you.

[blockofjoy]

That did the trick! Thank you.

[ruenel]

You’re welcome!
Thanks for letting us know that it has worked for you.