Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • October 30, 2019 at 1:20 pm #1152297
    KatrienW

    Hi team Enfold

    I know this is probably a long shot, but one of my biggest clients really wants this effect so bear with me.

    Their existing website is in for a make-over (running Enfold for over 2 years now), but they forgot that you can only have one theme on a website. ;) So they saw this beautiful rotating image effect on another theme makers’ demo site, and they want it on their site now. The effect I’m talking about can be seen on this site: https://helloceo.helloyoudesigns.com/. Below the header image is a pink logo, when you hover it, it kind of rotates sideways. Is it possible with css or with a plugin to create this effect in Enfold? If so, then that would be the best thing ever.

    Also, they love the ‘watercolor’ effect the menu bar has on that website. This kind of ripped/painted effect in white. Is it possible to create that? I was thinking about some kind of background image, but I don’t know if that kind of transparency would work?

    Thank you guys already in advance.

    Kat

    October 30, 2019 at 6:24 pm #1152447
    Victoria

    Hey KatrienW,

    Their header background is the image
    https://helloceo.helloyoudesigns.com/wp-content/themes/Hello%20CEO/images/headerbg.png and the rotating image can be done with the css.

    So all these things can be done :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

    October 31, 2019 at 1:50 pm #1152703
    KatrienW

    Hi Victoria

    Thanks for your quick response. If I set a background image with a transparency effect for the logo area it works just fine, the only thing I haven’t figured out is how I move the content below to the top of the page. I set the header to no transparency, but then the content of the page starts after the header and not under it. I put a screenshot in the private section as a reference (I can’t give you credentials since it’s a staging site). What code do I need to move the content up?

    Can you also provide a css code to make the logo rotate?

    Thanks!

    October 31, 2019 at 9:06 pm #1152846
    Victoria

    Hi KatrienW,

    What do you mean by content? The slider?

    Yes, we could, but we need the link to the website to help you with that.

    Best regards,
    Victoria

    November 5, 2019 at 3:43 pm #1154012
    KatrienW

    Yep, the slider indeed. Link provided in private. :)

    November 7, 2019 at 10:42 am #1154570
    KatrienW

    Hi, did you receive the link properly?

    November 11, 2019 at 1:58 am #1155446
    Mike

    Hi,
    Thanks for the link, here is the css to make the center logo rotate on hover:

    #top.home #av_section_1 > div > div > div > div > div.flex_column.av_one_full.av-hide-on-mobile.flex_column_div.av-zero-column-padding.first.avia-builder-el-2.el_before_av_one_fifth.avia-builder-el-first > div > div > div > img:hover {
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

    Best regards,
    Mike

    November 13, 2019 at 2:25 pm #1156410
    KatrienW

    Hi, thank you for the code. Unfortunately, it doesn’t change anything. Can you take a look please?

    Also, can you tell me what code I need to make the slider move up under the menu?

    Thanks!

    November 13, 2019 at 5:11 pm #1156445
    Mike

    Hi,
    Please try this instead:

    #top.home #av_section_1 > div > div > div > div > div.flex_column.avia-builder-el-2 > div > div > div > img:hover {
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

    After applying the css, Please clear your browser cache and check.
    If this doesn’t work, please add a custom class to the image so we can try again.

    Best regards,
    Mike

    November 14, 2019 at 12:05 pm #1156720
    KatrienW

    Hi

    It didn’t work unfortunately, I assigned the custom class ‘logotwist’ to the color section.
    Also, can you tell me what code I need to make the slider move up under the menu?

    Thanks!

    November 14, 2019 at 1:40 pm #1156784
    Mike

    Hi,
    To move the slider under the menu you need to set the page with a transparent header.
    please try this css for the logo, I didn’t see the other css I posted above, where you sure to clear your browser and cache plugin cache?
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #top.home #logotwist .avia-image-container img.avia_image:hover {
    -webkit-transform: rotate(30deg) !important; 
    -moz-transform: rotate(30deg) !important; 
    -ms-transform: rotate(30deg) !important; 
    transform: rotate(30deg) !important; 
    -webkit-transition: all 0.4s ease-in-out !important; 
    -moz-transition: all 0.4s ease-in-out !important; 
    -o-transition: all 0.4s ease-in-out !important; 
    transition: all 0.4s ease-in-out !important; 
}

    If this doesn’t work Please include an admin login in the Private Content area, perhaps you have a missing bracket in your css not allowing the css to work.

    Best regards,
    Mike

    November 14, 2019 at 2:25 pm #1156796
    KatrienW

    Hi

    It works now. ;) Thanks!

    November 14, 2019 at 7:21 pm #1156891
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Rotating image effect & menu effect’ is closed to new replies.