I'm having trouble finding out how to get the bounce outline effect on large icons. They change colour on rollover, but no outline. I'm aware there's a circle-border class but can't seem to get it to work.
Could you guide me towards the preferred approach?
I think I might have figured the problem - it seems to be a browser thing. The page performs differently in Firefox and Chrome for me. No icon animation in Chrome - just rollover colour change. In Firefox, you get the outline bounce transition.
That effect was left off the icons in chrome intentionally since it caused some issues when used in a parallax section or with video BG's - if you want to add it back in add this to the custom css box located in your Salient Options panel:
I'm having trouble finding out how to get the bounce outline effect on large icons. They change colour on rollover, but no outline. I'm aware there's a circle-border class but can't seem to get it to work.
Could you guide me towards the preferred approach?
Hey Moz!
Could you please provide the reference demo page url so i can take a look and provide you the details.
Thanks
ThemeNectar Support Team
http://themeforest.net/item/salient-responsive-mul...
4 icons under the slider.
With thanks.
Here's a better link, to the actual page in the demo rather than the iframe holder page on themeforest
http://themenectar.com/demo/salient/
I think I might have figured the problem - it seems to be a browser thing. The page performs differently in Firefox and Chrome for me. No icon animation in Chrome - just rollover colour change. In Firefox, you get the outline bounce transition.
Update: it works OK in IE (10) too. So it's almost certainly a Chrome thing.
Hey Moz!
That effect was left off the icons in chrome intentionally since it caused some issues when used in a parallax section or with video BG's - if you want to add it back in add this to the custom css box located in your Salient Options panel:
.col:not(#post-area):not(.span_12):not(#sidebar):hover .circle-border, #sidebar .widget:hover .circle-border { -webkit-transform: scale(1.18); }Cheers :)
Success. Thanks for the help there.
Congrats on the theme.