Tagged: image overlay
-
AuthorPosts
-
December 16, 2014 at 12:12 pm #368854
Hey,
Could you tell me how to remove the image hoverlay effect in ‘avia.js’? I’ve tried to comment out the block of code, as per this thread, but it’s creating an error and all javascript elements on the site fail.
Thanks, Graeme
December 16, 2014 at 4:02 pm #368939Hi Iano999!
Please find following code in Avia.js file and remove it – http://pastebin.com/Y6yQgBQ5
You can find it by searching “hover effect for images”Regards,
YigitDecember 16, 2014 at 4:48 pm #368965Hi Yigit,
Like I mentioned in my original post, removing that block creates an error, causing elements such as the ‘scroll-top-link’ box to fail. I’ve tried both deleting and commenting out the section, and I’m 100% certain I’m only selecting code that relates to the image hover effect, so cannot understand why this is causing an issue with other elements.
My ‘avia.js’ file is as follows: http://pastebin.com/xseFvC7d
- This reply was modified 10 years ago by Iano999.
December 18, 2014 at 10:26 am #369888Hi guys,
Sorry, I really need to resolve this, as it’s going to hold up out launch if it’s not fixed today. Is there any other way of disabling this effect? Trying to hide it by changing CSS hasn’t worked, as it creates spacing below images on hover – I need to be able to remove the js without breaking other js elements on the site.
December 18, 2014 at 3:45 pm #369983Hi!
Have you tried adding following code to Quick CSS in Enfold theme options under General Styling tab
.image-overlay { display: none !important; }
It should not cause a spacing
Regards,
YigitDecember 18, 2014 at 4:52 pm #370046Hi Yigit,
Thanks for your reply. Yeah, I’ve already got that in my CSS – the spacing is created on hover, but there’s no visible transition/opacity change. The images are links to another page, if that makes a difference to the CSS required?
December 18, 2014 at 4:57 pm #370051Hey!
Can you please post the link to your website and point out the images? Just to make sure that we are on the same page, this is the overlay you would like to remove – http://i.imgur.com/Khsyb78.png is that correct?
Regards,
YigitDecember 18, 2014 at 5:09 pm #370058This reply has been marked as private.December 18, 2014 at 5:19 pm #370070Hey!
Can you please try de-activating all active plugins and check if that helps?
Regards,
YigitDecember 18, 2014 at 5:31 pm #370085Hey Yigit,
I had tried that previously, but just deactivated all plugins again and the issue still persisted. Is there any reason you know of that would cause a problem with the avia.js file when I delete the block of code for the overlay? I know that removing the code fixes the problem from testing, but I can’t delete it at the expense of all other js elements on the site.
Thanks,
GraemeDecember 18, 2014 at 5:44 pm #370101Hi!
Can you please try adding following code to Style.css file of your child theme in Appearance > Editor
.col.span_1_of_2.card.products > a { display: compact!important; }
I cannot edit the file because of permissions
Regards,
YigitDecember 18, 2014 at 5:48 pm #370108Hey Yigit,
Sorry, that doesn’t seem to have any impact. I’ve tried a couple of variations to select the image within the link too, and it’s still creating the space below on hover.
December 18, 2014 at 8:31 pm #370185Hey!
Can you please make Style.css file writable so we can add custom CSS codes? Currently code i add to Quick CSS field is not being applied
Regards,
YigitDecember 19, 2014 at 11:47 am #370510Hi Yigit – I don’t think I’ll be able to do that because we have a strict firewall, and to edit files you need your ip whitelisted. When I’ve looked at the site this morning, the links below the images seem to be broken (http://cl.ly/Z2jS) – is this something you’ve changed?
Graeme
December 22, 2014 at 9:13 pm #371793Hi Graeme!
Sorry for the late reply!
No, i have only added custom CSS code which did not apply. There is a line break between A tags as you can see here – http://i.imgur.com/eQ0EmRE.png
Please remove those breaks. I removed from the first item on your Products page and it seemed to work fine. Please review your websiteBest regards,
YigitJanuary 5, 2015 at 12:28 pm #374998Hi Yigit,
Upon closer inspection, it seems that whenever I comment out the Image Overlay block in ‘avia.js’ it causes an issue with the Smooth Scrolling block directly below for anchor links, causing them to fail on the site. Can you test on your end and let me know how to comment out the Image Overlay section without causing an issue in the rest of the file?
Thanks, Graeme
January 7, 2015 at 4:04 pm #376215Hi guys,
I’m still waiting to hear how I can fix this issue – if anyone has the solution I’d massively appreciate it.
Thanks, Graeme
January 8, 2015 at 3:41 pm #376792Hey!
Sorry for the late reply Graeme. Please add following code to Style.css file of your child theme
.col.span_1_of_2.card.products > a + br { display: none!important; }
That seems to be fixing the issue on my end
Cheers!
YigitJanuary 9, 2015 at 12:07 pm #377317Awesome, thank Yigit – that’s perfect. Thanks for your help, I really appreciate it!
Have a great weekend,
GraemeJanuary 9, 2015 at 1:13 pm #377332 -
AuthorPosts
- The topic ‘Remove image hover effect’ is closed to new replies.