This is awesome! Can’t wait to test it.
Great tutorial!
Would someone mind helping with the text overlay on hover please?
I seem to be having a few issues with the desktop version… mobile works fine.
When you hover over the text, it appears fine. But when you hover off, the text won’t disappear.
Page is: http://promotions.futurefit.co.uk/pro-zone-guest-partners/
If someone has any suggestions or idea what I’ve done wrong - that would be greatly appreciated!
Thanks!
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!
Hi @Rob ,
That all makes perfect sense actually! Such a simple solution too!
Thank you for taking the time to reply - much appreciated.
Thanks,
J
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
@Jack not annoying at all! That’s what I’m here for 🙂
I had another look for you and I found the issue. You were using the tooltip version of the script and not the rollover version. Sorry I didn’t catch this before, but they are so darn similar I just missed that it wasn’t the right script.
I hopped into your page and adjusted the script for you and it’s working now in preview. Have a look and if you’re satisfied go ahead and republish.
All the best,
Rob
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 @Katy_Kruse could you link to the page or DM a link and I can take a look for you.
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!
hey @Martijn happy to take a look for you. Could you share the URL for your page?
Hi @Rob, the issue has been solved. But thanks anyway!
My pleasure! Glad you got it fixed 🙂
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,
I am having an issue where I am seeing this at the bottom of the page under the footer:
/* Unbounce Community :: Tips & Scripts :: Add Tooltips and Rollover Images in Unbounce TS:0002-04-046 *********************** Do not remove this section. It helps our team track useage of external workarounds. */
Is there a way to remove this?
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 @JamesN nice use of workarounds on that page! I’ve had a look and I believe the issue with the tooltip is being caused because of the functionality or the tabbed section script. The tooltip code will hide the box on page load, however the tabbed section also unhides the content. So what I believe is happening is that when the pricing link is clicked all the content in the box is shown including the hidden box for the tooltip.
You could try adding a line of code to the tabbed section script to make sure the tooltip box stays hidden (or technically gets re-hidden after showing the tabbed section). Something like this might work: https://www.screencast.com/t/Ws0P37Qy7sB
Another option would be to use the tooltip library through jQuery https://jqueryui.com/tooltip/ This would require some basic javascript knowledge though to get up and running.
Hope this helps!
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
Hi @Rob Found this thread really helpful. I have implemented a test version of the rollover functionality at the following page…
http://unbouncepages.com/fluxx-sandbox-image-rollover-effect/
When viewed on a laptop device with a mouse everything works perfectly in that as I move the mouse pointer over the different images only one of them ever shows the rollover state information.
However, when I view the page on my mobile (iPhone 6) when I tap any of the images the rollover state information appears for that image but when I then tap another image the rollover information on the previously tapped image does not disappear. I end up with all images showing the rollover state. Desire would be to have same as desktop whereby only one of the images is ever showing the rollover state information.
Can you please check my code and help me to resolve?
Many Thanks
Peter
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
Hi @Rob
Thanks for the update. I am currently building a new landing page for big media company project here in UK and had wanted to use that functionality. Any chance you might find the time to build in the workaround in next week or two? Otherwise I might have to look at different options for that area of the site.
Thanks
Pete
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! I am having a dickens of a time trying to make this happen on my page: http://livingstonepartners.com/livingstoneindustrialstats/
Hi @OlgaJewusiak I just had a look at the page and the images are changing when I mouse over them. They go to black and white (very cool!). Have you resolved the issues you were having earlier?
Hi Rob,
The B&W hover images are working, it’s the images below (in the Our Team block) that aren’t working. Basically I’m trying to make the picture change to the colored box on top with name, title and email/social media link when a mouse hovers over the photo. I have 4 different attempts going and neither work.
Ah I see, thanks for that extra context. I had another look and there were some issues with the IDs in the code not matching up properly. There were some minor issues with the CSS to hide the boxes as well. I’ve fixed things up for you and saved the page. You can check it in preview and if you’re happy go ahead and republish 🙂
to the next level?
Check out the Ultimate List of Unbounce Tips, Scripts & Hacks