Make a Image Circle Hover Effect - Support | Kriesi.at

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

Author

Posts
December 16, 2016 at 5:29 pm #725462

hfhf
Participant

Hello great Enfold-Team,

I am going crazy here. A client have found a really cool image hover effect at another theme. I would like to copy it. Please could you help me and give me a hint if something like that is possible and what to do.
Here is link to a short video how it works: https://www.dropbox.com/s/y80us8mdytmw9hv/Aufnahme-1.avi?dl=0
Thank you very much for your response in this case.
A great Enfold Fan!!!
Holger

December 16, 2016 at 5:45 pm #725476

Yigit
Keymaster

Hi Holger!

Thank you for contacting us!

Can you please post a link to your page and a link to example page where we can see the hover effect in action? We do not mind taking a quick look however if it requires heavy customization, we are going to need to ask you to hire a freelance developer. Let us check it first :)

Regards,
Yigit

December 16, 2016 at 5:57 pm #725486

hfhf
Participant

Hello Yigit, thank you for quick response. I know that you do not do customization. But … I know, you are so good and so nice .. and therefore I just asked. I only need to know if it is possible (the easy way) and I need a hint what to do.

Here is link to special effect: https://www.templatemonster.com/de/demo/50604.html
They have three effects in one:
1) yellow circle on hover over picture — this is what I want to copy
2) yello Plus sign with animation effect on hover over picture — I assume the animation effect is not possible without customization
3) combination with second hover effect with second element (line below circle picture)

I am mostly interested in no. 1 (the others are great too, but maybe not possible)
Please see my link in private area

Thank you and best regards

Holger

December 16, 2016 at 6:01 pm #725489

Yigit
Keymaster

Hey!

Thank you for your kind words :)
Can you please create a temporary admin login and post it here privately?

Best regards,
Yigit

December 16, 2016 at 6:18 pm #725503

hfhf
Participant

Hello Yigit,
here are login details

Thank you!

December 16, 2016 at 10:30 pm #725567
Yigit
Keymaster
Hi,

Sorry but functions.php file is not writable so i could not apply the changes.

Please enable the custom css class field: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and edit your image element to give it a custom CSS class (“custom-class” in example below) and then add following code to Quick CSS in Enfold theme options under General Styling tab
```
.custom-class .image-overlay { display: none !important; } 
.custom-class:hover a:after { 
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 500px;
    border: 15px solid #eeca6c;
    content: "";
    -webkit-transition: 0.25s;
    -moz-transition: 0.25s;
    -o-transition: 0.25s;
    transition: 0.25s;
}
.custom-class a:after { 
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border: 0 solid #fff;
    content: "";
    -webkit-transition: 0.65s;
    -moz-transition: 0.65s;
    -o-transition: 0.65s;
    transition: 0.65s;
    border-radius: 500px;
    z-index: 200;
}
```
Best regards,
Yigit
December 16, 2016 at 11:10 pm #725582

hfhf
Participant

Hello Yigit,
thank you for take a look into it. I activated custom CSS class and integrated Quick CSS Code.
But I am sorry to inform you that its not working. It seems that nothing happens.
Could you please check again. I tried it with three circle images in first row at Willkommen page (Home-3).
Thank you in advance.
Holger

December 20, 2016 at 4:25 pm #726628

Yigit
Keymaster

Hi,

I edited the last image on your page and gave it a custom CSS class “custom-class” and it does work. Please review your website now.

Best regards,
Yigit

December 21, 2016 at 10:54 am #726966

hfhf
Participant

Hello Yigit,
you are great!
I thank you very much for your help. This is exactly what I was looking for.
ENFOLD is best!!!!
Thank you
Holger

December 21, 2016 at 2:36 pm #727034

Yigit
Keymaster

Hi,

You are welcome! :)

For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you :)

Happy holidays!

Regards,
Yigit
Author

Posts

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

The topic ‘Make a Image Circle Hover Effect’ is closed to new replies.