Hover effect gone after update Enfold

Hi 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.

Hi 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, 7 months ago by vossenm.

Hi 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

Hi 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

Hi 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

Did 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?

Hi 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, 7 months ago by vossenm.

Hi 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, 7 months ago by vossenm.

Thank you again, have a nice day!

Marcel