Gallery thumbnail hover effect: zoom instead of fade

Hey mihand78,
To have the zoom effect on the gallery please try this css in your Quick CSS:

.avia-gallery-thumb a {
    -webkit-animation: in 1s;
}

.avia-gallery-thumb a:hover {
    -webkit-animation: out 1s;
}

@-webkit-keyframes in {
    from   { -webkit-transform: scale(1.05,1.05); }
    to { -webkit-transform: scale(1.05,1.05);}
}

@-webkit-keyframes out {
    0%   { -webkit-transform: scale(1.05,1.05); }
    100% { -webkit-transform: scale(1.05,1.05); }
}

#top .avia-gallery .avia-gallery-thumb a:hover {
    opacity: 1 !important;
}

Best regards,
Mike

Hi,
I see that your page is now a masonry item, do you have another page with a gallery item to test with? To apply this to only one or some gallery items you would add a custom class to the gallery and then include the custom class in the css.

Best regards,
Mike

Hi,
Thanks, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

.avia-gallery-thumb a {
    -webkit-animation: in 1.5s;
    animation-fill-mode: forwards;
}

.avia-gallery-thumb a:hover {
    -webkit-animation: out 1.5s;
    animation-fill-mode: forwards;
}

@-webkit-keyframes in {
    from   { -webkit-transform: scale(1.05,1.05);}
    to { -webkit-transform: scale(1,1); }
}

@-webkit-keyframes out {
    0%   { -webkit-transform: scale(1,1); }
    100% { -webkit-transform: scale(1.05,1.05); }
}

#top .avia-gallery .avia-gallery-thumb a:hover {
    opacity: 1 !important;
}

I didn’t see a custom class added to this gallery so I didn’t add it to the css, if you add a custom class I can adjust this for you.

Best regards,
Mike

Hi,
In the latest version 4.7.1 go to any element > advance tab > developer settings > custom css class:

as for the zoom effect, the structure of the elements are a little different so it’s acting a little different, I tried to match it the best I could.

Best regards,
Mike

Hi,
Thank you, it would be like this:

.test .avia-gallery-thumb a {
    -webkit-animation: in 1.5s;
    animation-fill-mode: forwards;
}

.test .avia-gallery-thumb a:hover {
    -webkit-animation: out 1.5s;
    animation-fill-mode: forwards;
}

@-webkit-keyframes in {
    from   { -webkit-transform: scale(1.05,1.05);}
    to { -webkit-transform: scale(1,1); }
}

@-webkit-keyframes out {
    0%   { -webkit-transform: scale(1,1); }
    100% { -webkit-transform: scale(1.05,1.05); }
}

#top .avia-gallery.test .avia-gallery-thumb a:hover {
    opacity: 1 !important;
}

After applying the css, Please clear your browser cache and check.

Best regards,
Mike

Hi András,

Great, I’m glad that you got it working. Please let us know if you should need any further help on the topic or if we can close it.

Best regards,
Rikard

Hi,
That one has different classes so please add this css for it to work:

a.avia-gallery-big {
    -webkit-animation: in 1.5s;
    animation-fill-mode: forwards;
}

a.avia-gallery-big:hover {
    -webkit-animation: out 1.5s;
    animation-fill-mode: forwards;
}

@-webkit-keyframes in {
    from   { -webkit-transform: scale(1.05,1.05);}
    to { -webkit-transform: scale(1,1); }
}

@-webkit-keyframes out {
    0%   { -webkit-transform: scale(1,1); }
    100% { -webkit-transform: scale(1.05,1.05); }
}

#top a.avia-gallery-big:hover {
    opacity: 1 !important;
}
.avia_transform a.avia-gallery-big:hover .image-overlay {
    opacity: 0 !important;
}

Best regards,
Mike

Hi,
I believe that you wrote “PHP” in error, the code above is “CSS”
Yes, you can add a custom “class” to your element and the code above to focus certain elements in the same matter.
Try adding .testbig followed by a space to the beginning of your code above, and add testbig to the element’s “custom class” field.

Best regards,
Mike

Hi,
I see, yes you can add a custom class to the code in the same way, I reopened the topic to answer there, please check.
Shall we close this thread then?

Best regards,
Mike

Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike