mouse hover effect

Hey vinayb,

By default enfold does not support this feature. We can help you with the custom CSS required but without testing, I cannot guarantee that this effect can be achieved. This might take a while tho. Let us know if that is ok with you.

Best regards,
Vinay

Hi,

I will work on this issue and get back to you with the result. Meanwhile please await my reply :)

Best regards,
Vinay

• This reply was modified 6 years, 8 months ago by Vinay.

Hi,

Ok here is what I managed to do.

Add the below masonry shortcode and select the portfolio or blog posts to display.

Note: masonry has a custom CSS class “av-masonry-flip”.

[av_masonry_entries link='portfolio_entries,20,22,23' wc_prod_visible='' prod_order_by='' prod_order='' sort='yes-tax' items='9' columns='3' paginate='load_more' query_orderby='date' query_order='DESC' size='fixed' orientation='av-orientation-square' gap='large' overlay_fx='active' id='av-masonry-flip' caption_elements='title excerpt' caption_styling='overlay' caption_display='always' color='' custom_bg='' av-medium-columns='' av-small-columns='' av-mini-columns='' av_uid='av-jggf0l6e']

Then add the below CSS

/* Masonry flip */
.av-masonry-flip .av-masonry-entry {
  transform-style: preserve-3d;
  transition: all .85s ease-in-out;
  
}
.av-masonry-flip .av-masonry-entry:hover {
  transform: rotateY(180deg);
}
.av-masonry-flip .av-masonry-entry .av-masonry-outerimage-container {
  backface-visibility: hidden;
}
.av-masonry-flip .av-masonry-entry .av-inner-masonry-content {
  z-index: -1;
}


.av-masonry-flip .av-masonry-entry:hover .av-inner-masonry-content {
    z-index: 1;
    transform: rotateY(180deg);
    backface-visibility: visible;
    animation: .85s flipIn!important;
}


@keyframes flipIn {
 0% {  
    opacity: 0;
  }
  49% {  
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

You can see a working example here http://graphitivity.com/enfold/docs/_test/

This is the best we can do for you if you need an effect that’s better than this we recommend using a 3rd party plugin that offers this type of animation.

Best regards,
Vinay

Hi,

It is not clear what exactly you are referring to. The masonry grid images in the example link flip around on mouse hover. Please feel free to edit the values in the above code to achieve the desired effect.

Best regards,
Vinay