Adjusting appearance of title hover in Modula gallery

Hello @teppoh ,

Regarding the white line/box removed this following CSS snippet should do the trick:

html body #jtg-225.modula .modula-item.effect-pufrobo .jtg-title::after{display:none} . This only works for that certain gallery as I attached it’s ID to the CSS snippet.

As for the darker-transparent part, the following CSS snippet should do the trick:

html body #jtg-225.modula .modula-item.effect-pufrobo .jtg-title {background:rgba(0,0,0,0.5); padding:5px}. Here you can play with the last part of the rgba(0,0,0,0.5) ( 0.5 part ) to set the opacity of the background ( how darker/transparent should it be ). Here, as before, I have included the gallery’s ID so that it won’t affect other galleries.

Hope this helps,

Best Regards!
Razvan

Thank you for the swift response. Got the white line nicely removed.

In the meantime I had already figured out the transparent background as well… however the padding does not seem to work. The right-aligned text is right at the edge, and otherwise also feel that the box is way too big, 5 px around the text/title would suffice.. or should I be talking about the margin here instead of padding?

Ps. I want to have this working the same for all galleries, so I removed the gallery ID.

Hello @teppoh ,

Sorry for the padding part, didn’t understand quite well. Please complete the CSS snippet with this:

right: 30px;
left: auto;
padding: 5px;
line-height: 21px;

So, the code between the brackets should look like this:
{background:rgba(0,0,0,0.5);padding:5px;left: auto;line-height: 21px;}

Hope this helps.

Best Regards!
Razvan

Thank you, got the background box a lot thinner now that’s great.

But the text is still touching the right side of the box… at least in all the browsers I’ve tested it on :-/

https://jspasheji.com/wp-content/uploads/2020/12/righ_padding_problem.png

I noticed that above you had “right: 30px;” in the CSS snippet above, but not below. I’ve tried with and without it, and also just with it (and no padding, or also without left: auto)… but nothing seems to work.

Alternatively I can just make the text center aligned, if can not get a 5 px padding/margin between text and the right edge of the box.

@teppoh seems like you have to insert !important in your code to overwrite the padding. Please update your code to this :
{background:rgba(0,0,0,0.5);padding:5px !important;left: auto !important;line-height: 21px;} . The !important in the left:auto part is for the box to be the width of the text and not it’s parent width.

Sorry for the !important part missing out.

Have a great day!
Razvan

Amazing! Thank you so much.

@teppoh My pleasure ??

All the best!
Razvan