Hi Chris

The solution here does vary slightly depending on the hover effect you are using. Would you have a URL to an example of your module?

Ciaran

Hi Ciaran

The temporary URL is http://jobdach.ch.eris.preview-ch-dns.net/

Thank you very much and kind regards
Chris

Thank you Chris

To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

[class*=" imghvr-fade"]:hover figcaption, 

[class*=" imghvr-fade"]:hover > img, 

[class^="imghvr-fade"]:hover figcaption, 

[class^="imghvr-fade"]:hover > img {

    transform: translate(0,0);

}

[class*=" imghvr-fade"]:hover figcaption, 

[class^="imghvr-fade"]:hover figcaption {

    opacity: 1;

}

Ciaran

Hi Ciaran

unfortunately the behaviour is still the same. I do hope you have not run out of ideas yet.

Thank you and kind regards
Chris

My apologies, I should have tested first

Use the following instead...

[class*=" imghvr-fade"] figcaption, 

[class^="imghvr-fade"] figcaption, 

[class*=" imghvr-fade"] figcaption *, 

[class^="imghvr-fade"] figcaption * {

    opacity: 1;

    transform: translate(0);

}

Ciaran

Hi Ciaran

here is my feedback: it works perfectly and I am very happy.

Thank you very much and kind regards
Chris

Hi Ciaran

I erroneously wrote «I would like to do without any hover effect. In other words: the text should be displayed at any time on any screen.» This requirement is met by your answer and works fine. But my customer now has a differentiated requirement.

1. The hover effect should apply to large screens, but not to mobile screens.
I could handle this by completing your code like this:

@media only screen and (max-width: 600px) {

  [class*=" imghvr-fade"] figcaption, 

  [class^="imghvr-fade"] figcaption, 

  [class*=" imghvr-fade"] figcaption *, 

  [class^="imghvr-fade"] figcaption * {

      opacity: 1;

      transform: translate(0);

  }

}

2. The hover effect on large screens should apply to the text only. He wants the title to be displayed at any time.
Can this be done easily? I can understand this requirement, since we are using this module as kind of a main menu. So it makes sense that the title is visible immediately. We are ready to pay for this customizing service.

Thank you very much and kind regards
Chris

Hi Chris

May I suggest sending temporary administration access to your Joomla installation to info@joomla51.com and we will examine this possibility further. For our reference please paste a link to this post in your email.

Ciaran

Thank you Chris

I have added the following to your custom CSS which I believe gives you the desired result. Note for this to be possible the effect is more of a fade-in rather than fade-in-up.

.j51imagehover [class*=" imghvr-"] figcaption, 

.j51imagehover [class^="imghvr-"] figcaption {

  transform: translate(0,0);

  background: transparent;

  opacity: 1;

}



.j51imagehover [class*=" imghvr-"]:hover figcaption, 

.j51imagehover [class^="imghvr-"]:hover figcaption {

  background: var(--j51-overlay-color);

}



.j51imagehover figcaption .j51imagehover_title {

  opacity: 1 !important;

}

Ciaran

Hi Ciaran

your support is really premium and I am again and again surprised to see what can be done by CSS code.

Thank you very much and kind regards
Chris

Thank you for the kind words .. happy to help if I can

Ciaran