Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #541537

    Morning Enfold forum :)

    The icons with optional hover effect produces a white flash when used as a link. Which css class is responsible for the color of the hover effect?

    I have a blue icon, a green icon and a red icon and would like the hover flash to be the same colour as the icon.

    I’ve tried combinations of .av-icon-char and av_font_icon with :a hover .span etc but can’t figure it out.

    Thanks in advance

    #541542

    Hey tjswarbs78!

    Can you please post the link to your website and a screenshot showing the changes you would like to make? :)

    Cheers!
    Yigit

    #541553

    link is private below. If you hover over the icon the tooltip explains what I’d like :)

    #541563

    Hey!

    I see but unfortunately that would require a heavy CSS customization to show a different color on each icon and would be out of the scope of our support. If you would like to give it a try, please see – https://kriesi.at/support/topic/hover-for-icons-with-links/#post-520804 and http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/.

    Regards,
    Yigit

    #541572

    You’ve pointed me in the right direction I shall give it a go :)

    Many thanks

    EDIT

    posting mainly due to the fact that with your direction I figured it out. May come in useful for others…

    Rather than the white sonar effect using the code below as an example you can set it to any color on any icon.
    First give the icon a customer css class ( in this case blue-icon and green-icon)
    Then the following css will color the sonar effect accordingly

    /*sonar effect blue*/
    .blue-icon a:hover:after {
    -webkit-animation: sonarblue 1s ease-out!important;
    -moz-animation: sonarblue 1s ease-out!important;
    animation: sonarblue 1s ease-out!important;
    }
    
    @-webkit-keyframes sonarblue {
    	0% {opacity: 0.3;}
    	40% {opacity: 0.5;box-shadow: 0 0 0 2px rgba(0,57,118,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(0,57,118,0.5);}
    	100% {box-shadow: 0 0 0 2px rgba(0,57,118,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(0,57,118,0.5);-webkit-transform: scale(1.5);opacity: 0;}
    }
    @-moz-keyframes sonarblue {
    	0% {opacity: 0.3;}
    	40% {opacity: 0.5;box-shadow: 0 0 0 2px rgba(0,57,118,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(0,57,118,0.5);}
    	100% {box-shadow: 0 0 0 2px rgba(0,57,118,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(0,57,118,0.5);-moz-transform: scale(1.5);opacity: 0;}
    }
    @keyframes sonarblue {
    	0% {opacity: 0.3;}
    	40% {opacity: 0.5;box-shadow: 0 0 0 2px rgba(0,57,118,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(0,57,118,0.5);}
    	100% {box-shadow: 0 0 0 2px rgba(0,57,118,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(0,57,118,0.5);transform: scale(1.5);opacity: 0;}
    }
    
    /*sonar effect green*/
    .green-icon a:hover:after {
    -webkit-animation: sonargreen 1s ease-out!important;
    -moz-animation: sonargreen 1s ease-out!important;
    animation: sonargreen 1s ease-out!important;
    }
    
    @-webkit-keyframes sonargreen {
    	0% {opacity: 0.3;}
    	40% {opacity: 0.5;box-shadow: 0 0 0 2px rgba(0,170,103,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(0,170,103,0.5);}
    	100% {box-shadow: 0 0 0 2px rgba(0,170,103,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(0,170,103,0.5);-webkit-transform: scale(1.5);opacity: 0;}
    }
    @-moz-keyframes sonargreen {
    	0% {opacity: 0.3;}
    	40% {opacity: 0.5;box-shadow: 0 0 0 2px rgba(0,170,103,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(0,170,103,0.5);}
    	100% {box-shadow: 0 0 0 2px rgba(0,170,103,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(0,170,103,0.5);-moz-transform: scale(1.5);opacity: 0;}
    }
    @keyframes sonargreen {
    	0% {opacity: 0.3;}
    	40% {opacity: 0.5;box-shadow: 0 0 0 2px rgba(0,170,103,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(0,170,103,0.5);}
    	100% {box-shadow: 0 0 0 2px rgba(0,170,103,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(0,170,103,0.5);transform: scale(1.5);opacity: 0;}
    }
    • This reply was modified 8 years, 4 months ago by tjswarbs78.
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Icon hover effect’ is closed to new replies.