Support » Plugin: Elements Plus! » Customise CSS Content Toggle

  • Resolved rodman38

    (@rodman38)


    Hi,

    I would like to customize the Content Toggle (also on hover), but nothing works, I’m not very good.

    I want to enlarge the Content Toggle then create an animation on hover, for example with :

    transition: all ease 0.6s;
    transform: scale (1.1);

    but i can’t find the right css code (class), can you help me please ?

    • This topic was modified 2 months ago by rodman38.

    The page I need help with: [log in to see the link]

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Support Fotis

    (@markwaregr)

    Hi,
    you can try something like this

    .ep-ct-secondary.ep-ct-content.active{
        transition: all ease 0.6s;
    transform: scale(1.1);
        opacity:1;
        height:auto;
    }
    .ep-ct-content-wrapper .ep-ct-content{
        opacity:0;
        height:0;
        display:block;
    }

    in your custom CSS box under Customize->Additional CSS

    Let me know if this worked for you.

    rodman38

    (@rodman38)

    Hi @markwaregr

    Thanks for your help, but it doesn’t work, it has no effect.

    Plugin Support Fotis

    (@markwaregr)

    Hi,
    I am sorry, perhaps I have mistaken the toggle button. My CSS was for this one https://prnt.sc/rkrr2q
    Do you mean something else?

    PS. I can see a zoom in effect there, which browser are you using?

    rodman38

    (@rodman38)

    @markwaregr

    Hi,

    Yes but i just noticed that the zoom is on the text (content), I don’t want that. I only want a zoom effect on the toggle button? And also change the size (enlarge) the toggle button

    Plugin Support Fotis

    (@markwaregr)

    Hi,
    to point the toggle switch only add this

    .ep-ct-switch input:checked + .ep-ct-slider {
        transition: all ease 0.6s;
        transform: scale(1.1);
    }

    instead.
    Let me know if this worked for you.

    rodman38

    (@rodman38)

    @markwaregr – Yes it works but only when a click, I would like to zoom only on hover (for the whole button)

    I tried this code but it doesn’t work :

    .ep-ct-switch a:hover + .ep-ct-slider {
    transition: all ease 0.6s;
    transform: scale(1.1);
    }

    Plugin Support Fotis

    (@markwaregr)

    Try this then

    .ep-ct-switch:hover .ep-ct-slider {
        transition: all ease 0.6s;
        transform: scale(1.1);
    }

    Let me know if this works

    rodman38

    (@rodman38)

    Thanks for your help, it works.
    Sorry, I don’t speak English well, I had a hard time making myself understood

    Plugin Support Fotis

    (@markwaregr)

    That’s great. Glad I could help. If you need additional help with anything, feel free to get in touch and I will be there for you within 24 hours.

    Also, we’d really appreciate if you could take a minute and rate our theme/plugin at https://wordpress.org/support/plugin/elements-plus/reviews/.

    rodman38

    (@rodman38)

    okay i’ll give you the best rating 😉

    I really like this toggle switch
    https://codepen.io/onediv/pen/pjgNqJg

    More difficult …

    Plugin Support Fotis

    (@markwaregr)

    Thank you!
    Can you recheck the link?

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