This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Circle Icon Widget zoom effect on hovering

Resolved 13 replies premiumthemetheme-vantage
Thomas Wolfgruber
11 years ago · Last reply by Andrew Misplon 10 years ago

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.

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

13
  1. Greg Priday Staff 11 years, 13 days ago

    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.

  2. Thomas Wolfgruber 11 years, 12 days ago

    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.

  3. Andrew Misplon Staff 11 years, 12 days ago

    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/

  4. Thomas Wolfgruber 11 years, 11 days ago

    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.

  5. Andrew Misplon Staff 11 years, 11 days ago

    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

  6. Thomas Wolfgruber 11 years, 10 days ago

    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/

  7. Andrew Misplon Staff 11 years, 10 days ago

    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);
}
  8. Thomas Wolfgruber 11 years, 9 days ago

    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?

  9. Andrew Misplon Staff 11 years, 9 days ago

    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);
}
  10. Thomas Wolfgruber 11 years, 8 days ago

    Thanks helped me a lot. Hope the weird bug in Chrome etc. gets fixed soon.

  11. Andrew Misplon Staff 11 years, 8 days ago

    Glad that helped a bit. Definitely, hope that gets resolved.

  12. David 10 years, 11 months ago

    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

    • Andrew Misplon Staff 10 years, 11 months ago

      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.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread