Expanding Circle from center on hover?

Page 1 of 1

10 Replies - 3768 Views - Last Post: 14 June 2013 - 10:05 AM

#1 Eludiac  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 21
  • Joined: 12-December 11

Expanding Circle from center on hover?

Posted 11 June 2013 - 09:33 AM

Hey guys! I would like to create some CSS circles for a nav which would expand from the center of their location, so I figured using CSS transform would be the best way to do this, as making the width and height of the circle would ruin the layout. The thing is, I want the content within the circle, be it text, and icon, whatever, stay the same shape and not be affected by the transform, but i'm having trouble figuring that part out!

Html:
<ul>
    <li><span>one</span>
    </li>
    <li>
        <div>two</div>
    </li>
    <li><span>three</span>
    </li>
</ul>


CSS:
li {
    list-style:none;
    float:left;
    margin-right:20px;
    width:50px;
    height:50px;
    background:blue;
    border-radius:100%;
}
ul > li:hover {
    -webkit-transform:scale(2, 2);
}


here's a fiddle too: http://jsfiddle.net/zRdr7/

Thanks for your help guys, I'm pretty stumped as to the best way to approach this.

Is This A Good Question/Topic? 0
  • +

Replies To: Expanding Circle from center on hover?

#2 mb2000inc  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 21
  • View blog
  • Posts: 333
  • Joined: 10-November 09

Re: Expanding Circle from center on hover?

Posted 12 June 2013 - 09:15 AM

I'm assuming you'd want some sort of JQuery "smooth" rollover type effect, yes?

http://api.jquery.com/mouseover/
Was This Post Helpful? 1
  • +
  • -

#3 Eludiac  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 21
  • Joined: 12-December 11

Re: Expanding Circle from center on hover?

Posted 12 June 2013 - 12:06 PM

Yes I am, I was going to use CSS transitions to achieve the effect though. would using mouseover be better than using the hover pseudo?
Was This Post Helpful? 0
  • +
  • -

#4 mb2000inc  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 21
  • View blog
  • Posts: 333
  • Joined: 10-November 09

Re: Expanding Circle from center on hover?

Posted 13 June 2013 - 04:46 AM

Well, a CSS hover is only going to enlarge the circle in a split second. Where a JQuery could/would/should allow for a smooth enlarge - where it would seem to "grow", if you will. The effect would appear more - fluid and less rough. Not to mention it would look more "professionally" done.

Just my two cents. ;)
Was This Post Helpful? 1
  • +
  • -

#5 Eludiac  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 21
  • Joined: 12-December 11

Re: Expanding Circle from center on hover?

Posted 13 June 2013 - 07:35 AM

Oh I agree, I was going to append CSS easing using Ceaser to make it smooth. I just need a way to only make the circle get larger without the icons within the circle getting larger. haha
Was This Post Helpful? 1
  • +
  • -

#6 mb2000inc  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 21
  • View blog
  • Posts: 333
  • Joined: 10-November 09

Re: Expanding Circle from center on hover?

Posted 13 June 2013 - 07:47 AM

well, if you put the icons in the center into their own "div" or container of sorts, they won't enlarge. It should only be the outer <LI> that expands.... maybe?

This post has been edited by mb2000inc: 13 June 2013 - 07:48 AM

Was This Post Helpful? 0
  • +
  • -

#7 Eludiac  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 21
  • Joined: 12-December 11

Re: Expanding Circle from center on hover?

Posted 13 June 2013 - 07:54 AM

So like the number 2 word "two" in the fiddle? http://jsfiddle.net/zRdr7/

This post has been edited by Eludiac: 13 June 2013 - 08:02 AM

Was This Post Helpful? 0
  • +
  • -

#8 mb2000inc  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 21
  • View blog
  • Posts: 333
  • Joined: 10-November 09

Re: Expanding Circle from center on hover?

Posted 13 June 2013 - 09:25 AM

Yes, but I'd give those "<span>"s a little styling to help ensure they don't expand - like an exact height/width property. And maybe keep padding or margins at an automatic amount so they stay centered...?
Just a thought.
Was This Post Helpful? 1
  • +
  • -

#9 Eludiac  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 21
  • Joined: 12-December 11

Re: Expanding Circle from center on hover?

Posted 13 June 2013 - 09:48 AM

http://jsfiddle.net/zRdr7/4/

-stuck some different styling on the div, and on hover the elements still gain size.
Was This Post Helpful? 0
  • +
  • -

#10 mb2000inc  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 21
  • View blog
  • Posts: 333
  • Joined: 10-November 09

Re: Expanding Circle from center on hover?

Posted 14 June 2013 - 09:41 AM

WAIT! I think I know! make the inner part the expanding circle, not the <LI>.... style the div to hold the circle, and make IT expand. Put the text into another container within.

Let me try something and get back to you. :)
Was This Post Helpful? 0
  • +
  • -

#11 mb2000inc  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 21
  • View blog
  • Posts: 333
  • Joined: 10-November 09

Re: Expanding Circle from center on hover?

Posted 14 June 2013 - 10:05 AM

Not quite it - but... I bet you can tweak it to work.
<html>
   <head>
      <title></title>
      <style type="text/css">
		ul{}
		ul li {
			list-style:none;
			float:left;
			margin-right:20px;
			width:50px;
			height:50px;
		}
		
		div .list{
			background:blue;
			border-radius:100%;
			padding-top:15px;
			padding-bottom:15px;
			text-align:center;
		}
		div .list:hover {
			-webkit-transform:scale(2, 2);
		}
        span
        {
            width: 20px;
            height: 20px;
            color: white;
            font-size: 12px;
        }

            span:hover
            {
                /*-webkit-transform:scale(2, 2);*/
                font-size: 10px;
            }
		
      </style>
   </head>
   <body>
	<div>
		<ul>
			<li>
				<div class="list">
					<span>1</span>
				</div>
			</li>
			<li>
				<div class="list">
					<span>2</span>
				</div>
			</li>
			<li>
				<div class="list">
					<span>3</span>
				</div>
			</li>
		</ul>
	</div>
   </body>
</html>

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1