Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1045566

    Since the pervious (2018 October 15th – Version 4.5) Enfold update the image hover effect is applied on the container and on the image. The hover effect has to be applied only on the image inside the container. It was solved by Andy years ago see this threat: https://kriesi.at/support/topic/default-image-hyperlink-effects/

    This is the current code i’m using.

    .avia-image-container-inner .custom-grid:hover {
    -webkit-transform: scale(1.2) rotate(5deg);
    moz-transform: scale(1.2) rotate(5deg);
    -o-transform: scale(1.2) rotate(5deg);
    transform: scale(1.2) rotate(5deg) !important;
    }
    .avia-image-container-inner .custom-grid {
    -webkit-transition: transform .2s ease-out !important;
    -moz-transition: transform .2s ease-out !important;
    -o-transition: transform .2s ease-out !important;
    transition: transform .2s ease-out !important;
    }
    .av-hover-grow:hover img {
    -webkit-transform: scale(1.2) rotate(5deg);
    moz-transform: scale(1.2) rotate(5deg);
    -o-transform: scale(1.2) rotate(5deg);
    transform: scale(1.2) rotate(5deg) !important;
    }
    .av-hover-grow img {
    -webkit-transition: transform .2s ease-out !important;
    -moz-transition: transform .2s ease-out !important;
    -o-transition: transform .2s ease-out !important;
    transition: transform .2s ease-out !important;
    }
    /* categorieën hover-uit speed */
    #top .av_inherit_color a {
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    }
    /* categorieën hover-in speed */
    #top .av_inherit_color a:hover {
    color: #ed9623 !important;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    }
    #1045985

    Hey Dutchman,
    I took a look at your page and hovered over the images at the bottom that grow & tilt, but I’m not sure that I understand what the issue is with them, the effect looks good.
    Please see the screenshot in Private Content area of what I’m seeing.

    Best regards,
    Mike

    #1046320

    Hi Mike,

    The effects (grow and tilt) have to take place within the border of the regular picture. See the example picture where i marked the container/border with the colour red. Before that Enfold 4.5 update the effects took place within the red border.(i only made it red with Photoshop to explain)

    #1046732

    Hi,
    Thanks for the explanation and image, to do this the overflow needs to be hidden. This css will solve your issue:

    .avia-image-container.av-hover-grow {
        overflow: hidden !important; 
    }

    Best regards,
    Mike

    #1048081

    Awesome Mike, thank you very much!!!

    #1048193

    Hi,
    Glad we could help, unless there is anything else we can help with on this issue, shall we close this then?

    Best regards,
    Mike

    #1048324

    Hi Mike, case closed!

    #1048359

    Hi,

    Best regards,
    Victoria

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

The topic ‘Hover effect on image’ is closed to new replies.