Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • August 11, 2017 at 7:46 am #837333
    ccyran

    Hey guys,

    Is there CSS to make hover highlight colors appear a bit slower? so it doesn’t change color as soon as you hover over it. See my example below in the private content!

    Thanks!
    Chris
    ccyran.com

    August 11, 2017 at 6:46 pm #837594
    Sarah

    Hey ccyran,

    It should be possible with the transition-delay CSS property. Which element were you trying to do this on?

    I’ll give you an example for how to use it. For your homepage (link in Private Content, just to verify), you can do this:

    .av-image-caption-overlay {transition-delay: 1.0s !important;}

    The current delay that you have is 0.3s.

    Is that what you were trying to do?

    Let us know if you need further help in applying this for the element you want.

    Best regards,
    Sarah

    August 11, 2017 at 6:47 pm #837595
    Sarah

    Hi Chris,

    By the way, there are other transition properties, like duration. You can check this page for reference: https://www.w3schools.com/css/css3_transitions.asp

    Best regards,
    Sarah

    August 11, 2017 at 9:26 pm #837663
    ccyran

    Hey Sarah!

    Im actually trying to do it to the header menu. So everything in the top… “work, about, social icons. etc”

    Thanks!
    Chris

    August 15, 2017 at 8:42 am #839101
    ccyran

    Hey Sarah,

    I think I figured it out with the CSS below… it seems to work! Can you double check I did it correctly/efficiently?

    .avia-menu-text {
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: linear;
    transition-delay: initial;
    }

    Thanks!
    Chris

    August 15, 2017 at 8:14 pm #839543
    Basilis

    Hi,

    Yeap, that does seem to be correct on what you need to do!

    Best regards,
    Basilis

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