-
AuthorPosts
-
March 7, 2017 at 7:55 pm #757211
Hi there,
On my website I had a hover effect on the images in the slider on the frontpage and I dont remember how that was done a while ago.
I did make a child theme for my website so it surprises me that this effect is gone now even though I use this child theme instead of the Enfold theme itself.In the Private content you can find both the links to the live site and an older backup with a previous version of Enfold.
Can you see what happened?
March 8, 2017 at 7:09 am #757515Hey vossenm,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
.ls-wrapper > a:hover { background: rgba(255,255,255,.25)!important; }
Best regards,
VinayMarch 8, 2017 at 3:22 pm #757841Hi Vinay,
That does seem to work, but now there is a white square visible on hover with PNG files?
The other older copy of the site doesn’t have that so I guess they used a different method then?Marcel
- This reply was modified 7 years, 8 months ago by vossenm.
March 10, 2017 at 3:17 am #758665Hi,
We checked your site again, the image on the right side on which you do not want the hover effect has the same class name as rest of the thumbnail images.
Please try adding a different class name to the image on which you do not require any hover effect from the “Link & Attribute” tab so we can target it separately using custom CSS.
Best regards,
VinayMarch 10, 2017 at 2:22 pm #758897Hi Vinay,
I do want the hover effect on all the images in the slider, but the images on the left for example are transparent PNGs.
In the old situation the images became a bit transparent on hovering, now with your effect they became ‘lighter’, but that effect also makes the transparent background of the left images (of the man and the book) white which looks strange, I hope you see what I mean?In addition to this, the code that used to do this is also still in the Quickcss field, but doesn’t work anymore:
a img.ls-preloaded:hover {
opacity: 0.5;
}I tried to replace your code with this and that also doesn’t work:
.ls-wrapper > a:hover {
opacity: 0.5 !important;
}Do you know why the opacity method doesn;t work anymore after the Enfold update? Because that is the real issue here…
Marcel
- This reply was modified 7 years, 8 months ago by vossenm.
March 15, 2017 at 12:35 pm #761351Hey!
Edit the layer with the png or transparent image then go to the Link & Attributes panel. In the “CLASS” field, add “ls-no-hover” then add the following css code in the Quick CSS field:
.ls-no-hover:hover { background: transparent !important; }
Cheers!
IsmaelMarch 15, 2017 at 2:10 pm #761418Hi there,
This doesnt seem to do anything…you can check the Live website link…
It’s strange that the original method below also stopped working with the latest Enfold update, do you know why that is?
a img.ls-preloaded:hover {
opacity: 0.5;
}Marcel
March 16, 2017 at 8:30 am #761770Hi!
We replaced it with the following css code.
.ls-no-hover + a:hover { background: transparent !important; }
Please remove browser cache before checking the page.
Cheers!
IsmaelMarch 16, 2017 at 3:40 pm #761993Hi there,
Thanks Ismael, but now the images that have this class don’t have a hover effect at all…
(I put the ls-no-hover class on the small images at the bottom)That is not what i want, I want the hover effect the same as before the Update of the Enfold theme….
Please compare the old situation with the new one (private content)…in the new situation the transparent background becomes white on hover which is bad…So I’m wondering whats the difference between the hover effect of the old situation (This is a copy of the site before Enfold was updated) and the new situation?
Marcel
March 18, 2017 at 4:15 am #762807Hey!
What is the password to the “mediwiet” site? The css code above should fix the hover effect for transparent images. It’s not going to apply hover effects to the links.
Regards,
IsmaelMarch 18, 2017 at 10:55 am #762859Hi Ismael,
I added the password below.
I would like the effect on the images in the slider on the https://www.stichtingmediwiet.nl to be like the http://mediwiet.tv/homecopy/ site.The effect was gone after the last Enfold update, even though the code that produced it is still there in QuickCSS:
a img.ls-preloaded:hover {
opacity: 0.5;
}The new code Vinay gave me works but makes the white box around the PNG images, and that looks bad…so I would like the effect to be the same as the original?
Marcel
March 19, 2017 at 6:23 am #763067Hi!
The new code Vinay gave me works but makes the white box around the PNG images, and that looks bad…so I would like the effect to be the same as the original?
That’s why we provided the other solution to remove the hover effect for transparent images. Please don’t apply it on layers where you want to add a hover effect.
Regards,
IsmaelMarch 19, 2017 at 9:09 pm #763321Did you check the old situation at all?
It worked perfectly before, so why doesn’t it work anymore, is that a secret or something? :(
i just want the situation back from before the last Enfold update, I use a child theme so I don’t understand why it still disabled the hover effect we made earlier….does this mean I can better not do the Enfold updates if I don’t want my site to get messed up?March 20, 2017 at 7:01 am #763506Hi!
The theme includes a new patch of the layer slider plugin which includes new options. We don’t know which option changed the hover effect but adding our suggestions above should restore the original effect.
Regards,
IsmaelMarch 20, 2017 at 12:38 pm #763609Hi Ismael,
In the original situation there was also a hover effect on the transparent PNG images, as you can see using the “Older copy with hover effect” link in the private content. It’s just not the SAME hover effect as in the new solution Vinay provided.
I tried your suggestions by adding this code in my quickcss:
.ls-no-hover + a:hover {
background: transparent !important;
}But when I use the ‘ls-no-hover ‘ class for the PNG images in the slider, they don’t have any hover effect at all?
(I did this with the 2 small pictures in the slider on the live site, the book and the speech bubble next to it)So I’m not sure if I did something wrong or if you don’t see the same effect as I see in my browser?
Marcel
- This reply was modified 7 years, 8 months ago by vossenm.
March 21, 2017 at 6:17 am #763998Hey!
Thank you for the update.
We replaced the css modification in the Quick CSS field:
.ls-no-hover + a:hover { background: transparent !important; } .ls-wrapper:hover img.ls-layer { opacity: 0.5 !important; } .ls-wrapper:hover img.ls-layer[src$=".png"] { opacity: 1 !important; }
Please remove browser cache or hard refresh before checking the page.
Regards,
IsmaelMarch 21, 2017 at 2:29 pm #764201Hi there Ismael,
That’s it!
Thank you, although one part of this code is already enough for what I wanted, I think there is still a misunderstanding about the PNG’s haha
I figured out that only this is enough alread, this works the same as the old code:.ls-wrapper:hover img.ls-layer {
opacity: 0.5 !important;
}The old code was:
a img.ls-preloaded:hover {
opacity: 0.5;
}Any idea why the old code had to be replaced? It looks like it does the same.
BTW I did try to replace background: rgba(255,255,255,.25)!important; with opacity: 0.5 !important; in the first solution by Vinay, but that also didn’t work, no hover effect was visible at all…very weird!
But now it work, thank you!
Marcel
- This reply was modified 7 years, 8 months ago by vossenm.
March 22, 2017 at 6:12 am #764560Hey!
Any idea why the old code had to be replaced?
The layer slider markup changed.
Best regards,
IsmaelMarch 22, 2017 at 3:29 pm #764820Thank you again, have a nice day!
Marcel
March 23, 2017 at 1:51 pm #765434Hi Marcel,
Glad we could help!
You too, have a nice day :)
Best regards,
Victoria -
AuthorPosts
- You must be logged in to reply to this topic.