How to set the hover result as the prime result

[mrroy44]

Hi there. I’m new here and I hope you’re willing to help me out.

I’m working on my site and just bought heroboxes for wp bakery by Gambit.
Their boxes show the title of the texts attached to the box, and when you move your mouse over it shows the caption/description.

Now I’m looking for a way to skip the hover and just make the boxes show the title and the caption/description as soon as you open the page. In other words, to show the hover result as the start result.

I can turn the hover effect on and off by leaving the caption/description field empty, but that’s not what I want.

And an additional question (if necessary I can post another thread for that, I don’t even know it it can be fixed with css) I also want to have line breaks in the text, but the html line break tag is just converted in to plain text.

This is the page I’m working on as a test: https://weddingreport.nl/trouwfotograaf-testvoorpagina/

Cheers,

Roy.

[mrroy44]

This is the CSS that comes with the plugin. I’ve tried to fix it by removing the opacity element in “.hero-box.hero-box-effect-sadie p.hero-box-caption”, but it seems to have no effect. :


.hero-box.hero-box-effect-sadie .hero-box-text{width:100%;top:0;bottom:0;padding:30px}
.hero-box.hero-box-effect-sadie h3.hero-box-title{position:absolute;text-align:center;left:0;right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
.hero-box.hero-box-effect-sadie .hero-box-img,.hero-box.hero-box-effect-sadie img{opacity:.9}
.hero-box.hero-box-effect-sadie p.hero-box-caption{position:absolute;text-align:center;left:0;right:0;bottom:40px;opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}

.hero-box.hero-box-effect-sadie:hover .hero-box-img,.hero-box.hero-box-effect-sadie:hover img{opacity:.7}
.hero-box.hero-box-effect-sadie:hover p.hero-box-caption{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
.hero-box.hero-box-effect-sadie:hover h3.hero-box-title{-webkit-transform:translateY(calc(-50% - 30px));transform:translateY(calc(-50% - 30px))}

[Shikkediel]

Edited – what you tried seems to work in developer tools. Could it be a caching issue?

[mrroy44]

It isn’t a caching issue. I’ve cleared all cashes using my wordpress clear all cache button and the webbrowser. I also did try it by copying the hover css to the start css, but that had no effect either.
I’m going to see if there might be is a second css file somewhere.

[mrroy44]

There is no other css code found that handles the .hero-box-caption
I did add this code to the Page custom CSS, and the font sizes of the caption increases. So it seems the right class. Howw ever it does nothing to the visibility of the caption before the hover.

.hero-box-caption
{ Font-size: 100px;
opacity:1; }

[Shikkediel]

Could you perhaps remove the opacity: 0 rule again? At that point it would be easier to determine why it isn’t working…

Like I said, removing it from the style directly using dev tools seems to do the trick.

Your current additional CSS isn’t effective because it still gets overwritten by the aforementioned rule.

[mrroy44]

Thanks, I tried it too, however still with no success.
I’ve given up on the issue and found another plugin (hover animations) by gambit that gives me more possibilities.
I could of course go on and try to get the result I want, but I’ve chosen the easy way out ;-)

Thanks anyway for your help, very much appreciated!

[Author]

Posts