1. crimle
  2. Sherlock Holmes The Voice
  3. Commercial Templates
  4. Tuesday, 26 December 2023
  5.  Subscribe via email
Hi Ciaran

I am using J51_Emani_J4 together with the module «ImageHover».

On a large screen, the hover effect looks quite good. But on a mobile screen, there is no mouse to hover over the image. Thus we do not see the text on a mobile screen. So I would like to do without any hover effect. In other words: the text should be displayed at any time on any screen.

I found your CSS suggestion here: https://www.joomla51.com/forum/imagehover-module-1#reply-49432 but these additions to my Custom CSS field have no effect at all.
Custom CSS.png

Thank you and kind regards
Chris
Attachments (1)
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you for the kind words .. happy to help if I can :)

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 3
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 4
Accepted Answer Pending Moderation
0
Votes
Undo
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
References
  1. http://jobdach.ch.eris.preview-ch-dns.net/
  1. more than a month ago
  2. Commercial Templates
  3. # 5
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran

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

Thank you very much and kind regards
Chris
  1. more than a month ago
  2. Commercial Templates
  3. # 6
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 7
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 8
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 9
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran

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

Thank you very much and kind regards
Chris
  1. more than a month ago
  2. Commercial Templates
  3. # 10
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 11
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters
the trademark holder in the United States and other countries.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok