Tagged: ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • May 16, 2016 at 8:34 pm #633246
    sitesme

    Hi,

    I would like to know if the image “fade” effect can appear on mouse hover for ALL images of the website, even the ones that do not have a link / zoom attached to them.

    The “fade” effect I am talking can be seen here: http://kriesi.at/themes/enfold/portfolio/portfolio-2-column/

    Like the “zoom” animation that is possible to enable at the moment with Enfold, is this “fade” effect possible as well with some code that applies all images on the website? If not, any other idea on how to do it individually?

    Thank you.

    May 17, 2016 at 1:34 pm #633736
    Yigit

    Hey sitesme,

    Please enable the custom css class field: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and then edit your image elements and give them a custom CSS class and then add following code to Quick CSS

    .your-custom-class:hover img { opacity: 0.5; }

    Best regards,
    Yigit

    May 17, 2016 at 2:12 pm #633750
    sitesme

    Hi Yigit,

    Thank you for this solution.

    Is there an alternative solution to add this effect to ALL images without applying a custom CSS class?

    Thanks.

    May 17, 2016 at 2:19 pm #633755
    sitesme

    One more quick question please:

    Is there a way the opacity effect has some delay to look like an animation when mouse goes over or outside the image area?

    Thank you

    May 18, 2016 at 1:41 pm #634428
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    .avia-image-container img:hover { opacity: 0.6; }
.avia-image-container img:hover, .avia-image-container img {  -webkit-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
   -moz-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
     -o-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
        transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
}

    Best regards,
    Yigit

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.