Hey guys,
I like the Circle Icons very much but there is one feature I would like to have…
Is there a way you can make the Circle Icon widget getting a bit bigger if you hover over it?
Would be really cool.
Circle Icon Widget zoom effect on hovering
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hi Thomas,
The easiest way to do this would be with a little custom CSS. Add the following to your custom CSS editor.
.widget_circleicon-widget .circle-icon-box:hover .circle-icon { -ms-transform: scale(1.25); -webkit-transform: scale(1.25); transform: scale(1.25); }You’ll need to tweak this to get the exact effect you’re after, but this should be a good starting point.
Okay thank you, it worked just great.
But I have one problem doing this… Everytime the image gets bigger or smaller, the text in the circle icon gets fuzzy and after 1 or 2 seconds it gets sharp again… Same with hte image which is getting scaled.
You could try this:
.widget_circleicon-widget .circle-icon-box:hover .circle-icon { -ms-transform: perspective(1px) scale(1.25); -webkit-transform: perspective(1px) scale(1.25); transform: perspective(1px) scale(1.25); }Ref: http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/
Okay it helped a little… now the text stays fuzzy while hovering over the widget. But I don’t understand why it doesen’t work properly. I read the article about this bug in some browsers but why works the css transition on this site: http://teamcofh.com/ ? I know it is another theme but it is still a css3 transform/transision.
Let’s try starting over. Please give the following a go:
/* Circle Icon Widget Scaling */ .widget_circleicon-widget .circle-icon-box.icon-position-top .circle-icon { transform: scale(1); transition: transform .3s ease-in-out; } .widget_circleicon-widget .circle-icon-box.icon-position-top .circle-icon:hover { transform: scale(1.25); }Thanks
Thanks for the quick reply, but the code you gave doesn’t work… It doesn’t do anything on the the website if I copy it in the CustomCSS.
If it helps here is the link for my website: http://ra-fortress.no-ip.org/
Sorry about that, give this a try:
/* Circle Icon Widget Scaling */ .circle-icon { transform: scale(1); transition: transform .3s ease-in-out; } .circle-icon:hover { transform: scale(1.25); }Thanks now only the picture gets fuzzy but thats okay with the “perspective(1px)” styling.
One last question :-)
Is there a way to scale the circle icon/picture when you hover over the circle icon widget box?
Sure, try the following:
/* Circle Icon Widget Scaling */ .circle-icon { transform: scale(1); transition: transform .3s ease-in-out; } .circle-icon-box:hover .circle-icon { transform: scale(1.25); }Thanks helped me a lot. Hope the weird bug in Chrome etc. gets fixed soon.
Glad that helped a bit. Definitely, hope that gets resolved.
But it doesnt work in Safari and in Google Chrome it doesnt look good…Is it possible that the icons hovering effect is the same as the post loop hovering effect? Because that effect works on all browsers
Hi David
We dived pretty deep into this thread. It’s a bit above and beyond theme/plugin support, we’re more into the custom development area here. I’m afraid, given our current support load it’s unlikely we’ll be able to dive further into custom hover effects for this widget. If this is something you need right away, we can recommend the developers at:
https://codeable.io/
In general, if you need a hand with anything else SiteOrigin related, please be sure to open a new support thread so we can best assist.