Tagged: icons
-
AuthorPosts
-
November 24, 2015 at 1:00 pm #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
November 24, 2015 at 1:03 pm #541542Hey tjswarbs78!
Can you please post the link to your website and a screenshot showing the changes you would like to make? :)
Cheers!
YigitNovember 24, 2015 at 1:13 pm #541553link is private below. If you hover over the icon the tooltip explains what I’d like :)
November 24, 2015 at 1:22 pm #541563Hey!
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,
YigitNovember 24, 2015 at 1:28 pm #541572You’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 9 years, 1 month ago by tjswarbs78.
-
AuthorPosts
- The topic ‘Icon hover effect’ is closed to new replies.