Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • January 26, 2019 at 4:53 am #1058995
    KarenBH

    Hello –
    I’m using stand alone icons to link to other areas of my site, but they don’t seem to react to hover indicating they are linked. Is there a way to do this? I’m afraid it won’t be obvious they are links if they don’t change color on hover.

    Thanks

    January 26, 2019 at 5:42 pm #1059199
    Jordan Shannon

    Hey KarenBH,

    Please provide a link to the site/page in question so we can look into this further.

    Best regards,
    Jordan Shannon

    January 26, 2019 at 7:07 pm #1059216
    KarenBH

    Hi Jordan,

    Privately sending a test page as I’m actively working on the other pages.

    I’ve got a work around by putting the link on the column rather than the icon so I get a faint hover effect. This is workable except when I want several icons in one column. If this is what I have to use, I would like it to be more pronounced.

    I see on this test page that there is a little burst reaction on the one on the gray background. If this is the hover effect, how do I change it’s color so it’s visible on the white background, and why doesn’t it show on the gray background on my live page – New Admissions?

    I also tried a custom CSS class that made the background change color on hover, but I’m not very good at CSS, so it broke the customization on my logo.

    Basically, I want to use the icons instead of buttons so I need it to be really obvious to the user that those are clickable links.

    The icons also get just a little shaved off on the bottom and right sides sometimes, but not always. Is there a fix for this?

    I’ve gone ahead and updated the Kreisi user account on my admin site with a new password to give you access – I’ve read enough in the forum to know that’s a likely next step.

    Thanks!
    Karen

    January 26, 2019 at 8:16 pm #1059236
    Mike

    Hi,
    For your icon buttons, we can create many types of hover effects, please see these examples or these.
    I thought that having colors invert and pulse & grow a little might be nice.
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #top.page-id-3645 .av-icon-char:hover {
    background: #186F00;
    color: #fff !important;
    -webkit-animation: pulse ease-in-out 2s infinite;
    border-radius: 50%;
}
@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
    }
    51% {
        -webkit-transform: scale(1.1);
    }
    100% {
        -webkit-transform: scale(1);
    }
}

    this css will only work on the test page so it won’t interfere with other pages, please let us know if you would like to use it on a different page.

    Best regards,
    Mike

    January 26, 2019 at 11:11 pm #1059262
    KarenBH

    Mike –
    This is amazing, thank you so much.
    I’m guessing to apply to all pages I just take out .page-id-3645?
    And I like the pulse, but if I decided to take it out, just remove
    -webkit-animation: pulse ease-in-out 2s infinite;
    and
    }
    @-webkit-keyframes pulse {
    0% {
    -webkit-transform: scale(1);
    }
    51% {
    -webkit-transform: scale(1.1);
    }
    100% {
    -webkit-transform: scale(1);
    }
    }`

    I’m not clear on what border-radius: 50%; does. Is that related to the pulse or is it cleaning up the shaved edges of the icons that I mentioned?

    And seriously – thank you sooooooo much – super excited about this!

    Karen

    January 27, 2019 at 12:31 am #1059267
    Mike

    Hi,
    Please try:

    #top .av-icon-char:hover {
    background: #186F00 !important; 
    color: #fff !important;
}

    but if you have some of those icons on other pages that are not links, you may want to add a custom class so those won’t be triggered. Please let us know it becomes an issue.

    Best regards,
    Mike

    January 29, 2019 at 3:51 am #1059875
    KarenBH

    Thanks, Mike – works like a charm!

    Karen

    January 29, 2019 at 5:30 am #1059885
    Mike

    Hi,
    Glad to hear, I assume we can close this now, but I like to ask first. Shall we close this then?

    Best regards,
    Mike

    January 29, 2019 at 2:55 pm #1060015
    KarenBH

    Actually, Mike, there is one more thing – in several places my large icon circles appear a little shaved top or bottom. It’s inconsistent and sporadic – the best things to try to debug!

    Some links below where I’m seeing it now. Occurs most often on the bottom, but sometimes also on the right. Maybe a padding issue?

    January 29, 2019 at 7:40 pm #1060155
    KarenBH

    Here’s a screenshot of the shaving off of the circle around the icon:
    https://drive.google.com/file/d/1RQxL78TeJyRUSjAWuOVGbplIiFLKPQGS/view?usp=sharing

    Hoping re-posting before your reply doesn’t mess up my order in the queue!

    January 30, 2019 at 5:40 am #1060334
    Mike

    Hi,
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    .av_font_icon.av-icon-style-border a.av-icon-char {
 outline: solid transparent 3px !important; 
 overflow: visible !important; 
}

    Please clear your browser cache and check.

    Best regards,
    Mike

    January 30, 2019 at 5:59 am #1060338
    KarenBH

    You are the best, Mike. That worked beautifully.

    You can mark the ticked closed now.

    Thank you so much for helping make my site great!

    Karen

    January 30, 2019 at 3:27 pm #1060512
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Make Icon change color on hover’ is closed to new replies.