Hi @peterhay I’d love to be able to promise you that i’ll get this done quickly but unfortunately I don’t think I’ll be able to have that done in time. I’ll do my best but to be honest it’s not likely. There is an entire jQuery mobile library though, so you might be able to slap something together using that, although it wold require some javascript knowledge and familiarity.

https://api.jquerymobile.com/tap/

I hope this helps at least in pointing you in the right direction until I’m able to put some more time into this workaround here.

Hi @peterhay I didn’t include the full tap functionality in the original script, so this isn’t something that’s currently possible with the workaround as it is now. I’ll try and find the time to add this functionality though when I can as I can certainly see the value in having some different functionality for the mobile experience. Thanks for leaving that feedback here Peter! Sorry I don’t have it built into the workaround at the moment. I’ll do my best to add it though when I can find the time.

Regards

Hey @Rob,
I tried the line of coding to the tabbed section. It re-hid the tooltip box, however it wouldn’t reveal on rollover. I don’t really have any knowledge in javascript, but I’ve currently figured out a way to get it to somewhat work the way I had intended by playing with the code from the site you linked. I’ll have to have one of my coworkers (who knows javascript) double check what I did to make sure it won’t mess anything up or has any ideas on making it look “prettier”.

Thank you for your quick response and suggestions!

James

Hey @Rob,
I’m using your script on my page. It was working fine then all of a sudden stopped working properly. It’s showing the box on load and then doesn’t show again on hover. The page is https://www.abbyy-finereader.com/ in the “Pricing” section. If you could let me know what could be causing and a potential solution it would be greatly appreciated.
Thanks,
James

Hi Rob,

Is it possible to create the image change/overlay on Button Click instead of on hover?

Want to create exactly like this effect https://goo.gl/GFu8NE

Was by Unbounce support to ask you if the script would need to be modified.

Thanks
Aden

Hi @Rob, the issue has been solved. But thanks anyway!

Hi

I’m also having some difficulty with the rollover feature. Everything is going well when I hover over the image and leave the image to the right or to the left. However, when I leave the image going up or down, the second image will reappear and stay.

Does anyone know how to solve this?
Thank you in advance!

Hello!

I’m having some difficulty with the rollover feature. Everything works fine until I move my mouse OFF of the image. The text disappears for a second, then comes right back even when my mouse is not on the image. I have to roll over the images several times before the text will disappear.

Has anyone else had this problem?

Thank you for your help in advance!

Hi @Rob

I am still having trouble with this, after using element boxes.

Page: http://promotions.futurefit.co.uk/the-future-of-fitness/

Desktop: content shows but flashes once. Hovering over the CTA also makes the content pulse…?
Mobile: content appears once for a second then vanishes

Javascript:

> <script>
>   $(function() {
>     $('#lp-pom-image-499').hover(function() {
>         $('#lp-pom-box-472').fadeIn("slow");
>       },
>       function(){
>         $('#lp-pom-box-472').fadeOut("slow");
>     });
>  });
> </script>

> <script>
>   $(function() {
>     $('#lp-pom-image-500').hover(function() {
>         $('#lp-pom-box-480').fadeIn("slow");
>       },
>       function(){
>         $('#lp-pom-box-480').fadeOut("slow");
>     });
>  });
> </script>

> <script>
>   $(function() {
>     $('#lp-pom-image-501').hover(function() {
>         $('#lp-pom-box-481').fadeIn("slow");
>       },
>       function(){
>         $('#lp-pom-box-481').fadeOut("slow");
>     });
>  });
> </script>

> <script>
>   $(function() {
>     $('#lp-pom-image-504').hover(function() {
>         $('#lp-pom-box-482').fadeIn("slow");
>       },
>       function(){
>         $('#lp-pom-box-482').fadeOut("slow");
>     });
>  });
> </script>

> <script>
>   $(function() {
>     $('#lp-pom-image-502').hover(function() {
>         $('#lp-pom-box-483').fadeIn("slow");
>       },
>       function(){
>         $('#lp-pom-box-483').fadeOut("slow");
>     });
>  });
> </script>

> <script>
>   $(function() {
>     $('#lp-pom-image-503').hover(function() {
>         $('#lp-pom-box-484').fadeIn("slow");
>       },
>       function(){
>         $('#lp-pom-box-484').fadeOut("slow");
>     });
>  });
> </script>

CSS

> <style>
>   #lp-pom-box-472{
>    display: none; 
>   }
> </style>

> <style>
>   #lp-pom-box-480{
>    display: none; 
>   }
> </style>

> <style>
>   #lp-pom-box-481{
>    display: none; 
>   }
> </style>

> <style>
>   #lp-pom-box-482{
>    display: none; 
>   }
> </style>

> <style>
>   #lp-pom-box-483{
>    display: none; 
>   }
> </style>

> <style>
>   #lp-pom-box-484{
>    display: none; 
>   }
> </style>

Sorry to be annoying, but any advice/guidance would be much appreciated!

Thanks,

J

Hi @Jack,

I just had a look for you and the code is set up correctly. The issue seems to be that the script is targeting the text itself and you don’t have the text element in a box that covers the whole image.

Since the script is only triggered when the mouse leaves the text box, if the mouse doesn’t actually hover over the text itself before moving away then the text will stay when you hover off the image. For example if you hover on the image below the text, it will appear, but if you hover off the image without first brining the mouse over the text, the text will stay.

Gosh I hope that makes sense…

My advice would be to add a transparent box over the image and nest your text inside that box. Set the opacity of the box to 0 and the use the ID of the box in the script instead of the ID of the text itself.

Let me know if you hit any more issues!

This is awesome! Can’t wait to test it.