Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • #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?

    #757515

    Hey 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,
    Vinay

    #757841

    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.
    #758665

    Hi,

    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,
    Vinay

    #758897

    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, 8 months ago by vossenm.
    #761351

    Hey!

    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!
    Ismael

    #761418

    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

    #761770

    Hi!

    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!
    Ismael

    #761993

    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

    #762807

    Hey!

    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,
    Ismael

    #762859

    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

    #763067

    Hi!

    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,
    Ismael

    #763321

    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?

    #763506

    Hi!

    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,
    Ismael

    #763609

    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, 8 months ago by vossenm.
    #763998

    Hey!

    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,
    Ismael

    #764201

    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, 8 months ago by vossenm.
    #764560

    Hey!

    Any idea why the old code had to be replaced?

    The layer slider markup changed.

    Best regards,
    Ismael

    #764820

    Thank you again, have a nice day!

    Marcel

    #765434

    Hi Marcel,

    Glad we could help!

    You too, have a nice day :)

    Best regards,
    Victoria

Viewing 20 posts - 1 through 20 (of 20 total)
  • You must be logged in to reply to this topic.