-
Posts
-
I have an image setting to display overlay as well as caption text over once hovered. Now, of course, there is no such a thing as hover on mobile. So android devices will display that hover effect once an image or icon is clicked. Which is perfect and I actually like that.
However Iphone & Ipad do not display any effect once images are clicked ( image overlay and caption )?
This also happens for an icon effect I use that displays a tooltip above it once hovered or clicked on android?Thanks in advance
thanks for quick response. When I long tap magnifying glass shows up which you can drag around an image. Once let go little area on the image gets highlighted with a tooltip option to define, copy etc… really strange as there is nothing over the image (at least visible).
thanksHey!
I’ll go ahead and flag this for the rest of our team to take a look as I don’t have an iOS device to test on.
Regards,
ElliottHi!
Can you please try updating the theme to latest version 2.4.7 firstly – kriesi.at/documentation/enfold/updating-your-theme-files/
Regards,
YigitHi Yigit, thanks, but i have already updated the version and looks that the same issue is happening.
Hey!
Please try adding following code to Quick CSS in Enfold theme options under General Styling tab
@media only screen and (max-width: 480px) { .av-overlay-on-hover .av-image-caption-overlay { opacity: 1; }}Regards,
Yigitthanks for you reply. with the code you suggested the effect that should appear on hover (desktop) or when you tap (mobile-android) appears right away on iOS (iPhone, iPad ). Meaning as soon as page loads color overlay and text (in my case) is on top of the image. This effect should be visible only when you tap on the image and it should load up together with the image. Any suggestions? Thanks again
Hello Enfold Team,
I am just following up on my question originally asked on dec 7, 2015. Since then I have been given answers such as: we have to find someone that uses iPhone/iPad , please provide us the link and most recently, finally, some actual suggestions, but that didn’t help either.
I didn’t use any special css nor implemented a custom code or plug in. I simply used a feature provided with he theme. So that is a reason why I am baffled why are you not willing to help me? I can’t believe that simple hover effect doesn’t work on iOS ? Your theme is arguably the best wp theme out there and for that little effect not to work on iOS ……. .. ….. … ….. …… I thought that your theme is compatible with major os?
So, in any case, can you please let me know what is the solution ?
I would really appreciate your honesty, and if its not possible for this build in effect to work on iOS then please let me know.
Thanks team
Thanks Yigit,
I think this solution works perfect, it’s obvious that IOS doesn’t have and hover actionHey!
@motza: Please try to add this in the Quick CSS field:.av-overlay-on-hover .avia-image-container-inner:focus .av-image-caption-overlay { opacity: 1; filter: alpha(opacity=100); }You have to remove the previous code.
Regards,
IsmaelThanks so much for your reply. Still nothing though. Once I tap on image on iOS nothing happens . Magnifying glass and highlighted are shows up only. Any other suggestions? Oh, also button (“learn more”) on home page doesn’t work on iOS…
Thanks again
Hey!
Alright. Please try this instead:
@media only screen and (max-width: 989px) { .av-overlay-on-hover .avia-image-container-inner .av-image-caption-overlay:hover { opacity: 1; filter: alpha(opacity=100); } }This will enable the text overlay on tap but the image will not zoom in. Please remove all cache before testing the page.
Cheers!
IsmaelHey!
This may be my last attempt to fix it. Please try this:
@media only screen and (max-width: 989px) { .av-overlay-on-hover .avia-image-container-inner .av-image-caption-overlay { opacity: 0; filter: alpha(opacity=0); display: none; } .av-overlay-on-hover:focus .avia-image-container-inner .av-image-caption-overlay { opacity: 1; filter: alpha(opacity=100); display: block; } .av-overlay-on-hover:hover .avia-image-container-inner .av-image-caption-overlay { opacity: 1; filter: alpha(opacity=100); display: block; } }I hope it works.
UPDATE: We modified the code a bit. Please copy the code directly from this forum, not from your email.
Best regards,
IsmaelYes ! you did it! The effect is the same now on iOS as well.
side note: The only thing is that if you want to disable it you need to tap right next the the picture box or to tap on a link. On android you will disable the effect by clicking away form it anywhere on the page. Thats all. Not a biggie just an observation.
Thanks a million !
- You must be logged in to reply to this topic.