Rotating image effect & menu effect - Support | Kriesi.at

Viewing 13 posts - 1 through 13 (of 13 total)

Author

Posts
October 30, 2019 at 1:20 pm #1152297

KatrienW
Participant

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
Inactive Moderator

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
Participant

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
Inactive Moderator

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
Participant

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

November 7, 2019 at 10:42 am #1154570

KatrienW
Participant

Hi, did you receive the link properly?

November 11, 2019 at 1:58 am #1155446
Mike
Moderator
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
Participant

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
Moderator
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
Participant

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
Moderator
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
Participant

Hi

It works now. ;) Thanks!

November 14, 2019 at 7:21 pm #1156891

Jordan Shannon
Inactive Moderator

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.