Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • September 9, 2015 at 9:29 pm #500725
    GailSabol

    Hello Support,
    Is it possible to increase the hover effect size and speed in an Image box?
    I have built 5 icons on the homepage that the client would like to see get a bit larger and increase with greater speed when the cursor passes over them.
    Possible?
    Domain in the Private Content area.
    Thank you,
    Rege

    September 10, 2015 at 4:02 pm #501109
    Elliott

    Hey GailSabol!

    Try playing around with the CSS on line 3218 in the /enfold/css/shortcodes.css file.

    .av-hover-grow{overflow: hidden; }
.av-hover-grow img {
-webkit-transition: all 1.7s cubic-bezier(0.230, 1.000, 0.320, 1.000);
transition:			all 1.7s cubic-bezier(0.230, 1.000, 0.320, 1.000);
}

    The 1.7s refers to the speed in seconds.

    Best regards,
    Elliott

    September 10, 2015 at 6:44 pm #501267
    GailSabol

    Thank you Elliott. The code you provided affects the speed. Is there additional code that affects the size?
    Thank you.
    Gail

    September 11, 2015 at 3:21 pm #501691
    Andy

    Hi!

    use this code:

    .av-hover-grow:hover img {
-webkit-transform: scale(1.6);
transform: scale(1.6);
}

    and adjust 1.6 as needed.

    Regards,
    Andy

    September 11, 2015 at 3:40 pm #501711
    Elliott

    Hi!

    Try changing the scale on the line below it.

    .av-hover-grow:hover img { -webkit-transform: scale(1.1); transform: scale(1.1); }

    The 1.1 means 110% of original size.

    Regards,
    Elliott

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