How can I make the width transition smooth on hover?

Question

This is probably super simple but I'm completely stuck and I can't find anything helpful. Sorry if this was asked already, if so please link me to it and sorry to have wasted your time.

So, I have this code:

#nav {
    position: fixed;
    top: 70px;
    left: 70px;
}

.button {
position: relative;
    background: white;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 2px;
    border: 1px solid #eee;
    width: 20px;
    height: 20px;
    line-height: 20px;
}

.button:hover {
    width:auto;
}

.text {
        overflow: hidden;
}

.icon {
        float: left;
        margin-right: 5px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>

<div id="nav">
    
<div class="button">
<div class="icon"><i class="fa fa-home" aria-hidden="true"></i></div>
<div class="text">home</div>
</div>
    
</div>

What I'd like to do is:

Get the house symbol inside a square so it looks like a little button. The text "home" shouldn't be visible at all.
Make the whole thing's width expand smoothly when I hover on the house "button" to reveal the text. If possible, I'd like the expanded width to fit the text I get there since I'll have more tabs with different text lengths.

Sorry if this is too much to ask. I'm really stuck with this, as you can see I kind of got the basics working already, all I need is really these two points I listed above. Thank you so much for your help.

You can't transition to `auto`... – Paulie_D Aug 16 '16 at 20:45 — Paulie_D, Aug 16 '16 at 20:45
Oh, I didn't know that :/ Thank you. – Sol Aug 16 '16 at 20:49 — Sol, Aug 16 '16 at 20:49

freak · Answer 1 · 2016-08-16T20:53:20.240

What you want is a CSS Transition. Note the transition properties added to the initial css block for the button.

But in order to implement this properly, you'll also want your :hover selector width to be more precise than a variable 'auto' value - try something like '100%'. Take a look at this:

#nav {
    position: fixed;
    top: 70px;
    left: 70px;
}

.button {
position: relative;
    background: white;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 2px;
    border: 1px solid #eee;
    width: 12px;
    height: 20px;
    line-height: 20px;

    -webkit-transition: width 1s;
    transition: width 1s;
}

.button:hover {
    width: 100%;
}

.text {
        overflow: hidden;
}

.icon {
        float: left;
        margin-right: 5px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>

<div id="nav">
    
<div class="button">
<div class="icon"><i class="fa fa-home" aria-hidden="true"></i></div>
<div class="text">home</div>
</div>
    
</div>

Notice you'll define in your transition property what OTHER property is going to be changing - in this case, width - and how long that change should take place - such as 1 second. You can also use tenths of a second as well if 1s is too slow.

"transition: width .[x]s;"

This is exactly what I was looking for, thank you! Is there a way to make it that the "home" word or whatever text I get there not to be visible when it's not hovered? — Sol, Aug 16 '16 at 20:51
Yup, just change the initial "width" vaue you define in the .button class. I've updated the code to cover what you're looking for. Looks like 12px is a good spot for you instead of the initial 20px in the original post. Also notice the addition explaining the transition usage, and the change of the speed. Be sure to mark this as the correct answer! :) — freak, Aug 16 '16 at 20:57

score 3 · Accepted Answer · answered Aug 16 '16 at 20:52

You can center the icon with some left margin and use CSS transitions for the hover effect (see w3schools for some more examples):

#nav {
  position: fixed;
  top: 70px;
  left: 70px;
}
.button {
  position: relative;
  background: white;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 2px;
  border: 1px solid #eee;
  width: 20px;
  height: 20px;
  line-height: 20px;
  -webkit-transition: width 1s;
  transition: width 1s;
}
.button:hover {
  width: 100%;
}
.text {
  overflow: hidden;
}
.icon {
  float: left;
  margin: 0 5px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" />

<div id="nav">

  <div class="button">
    <div class="icon"><i class="fa fa-home" aria-hidden="true"></i>
    </div>
    <div class="text">home</div>
  </div>

</div>

Thank you @Andreas! This is exactly what I needed! – Sol Aug 16 '16 at 20:58 — Sol, Aug 16 '16 at 20:58

score 1 · Answer 3 · answered Aug 16 '16 at 20:51

Use transition: all 1s;

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

#nav {
    position: fixed;
    top: 70px;
    left: 70px;
}

.button {
    position: relative;
    background: white;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 2px;
    border: 1px solid #eee;
    width: 18px; /*  <-- match this width better */
    height: 18px;
    line-height: 20px;
    transition: all 1s; /*  <-- CSS3 transition */
}

.button:hover {
    width:6em; /*  <-- set a defined width */
}

.text {
        overflow: hidden;
}

.icon {
        float: left;
        margin-right: 5px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>

<div id="nav">
    
<div class="button">
<div class="icon"><i class="fa fa-home" aria-hidden="true"></i></div>
<div class="text">home</div>
</div>
    
</div>

score 1 · Answer 4 · edited Aug 25 '20 at 18:12

Use transition and a set width. width: auto doesn't work with transitions.

#nav {
    position: fixed;
    top: 70px;
    left: 70px;
}

.button {
    position: relative;
    background: white;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 2px;
    border: 1px solid #eee;
    width: 20px;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    transition: linear 0.3s;
}

.button:hover {
    width: 100%;
    
}


.icon {
        float: left;
        margin-right: 5px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>

<div id="nav">
    
<div class="button">
<div class="icon"><i class="fa fa-home" aria-hidden="true"></i></div>
<span class="text">home</span>
</div>
    
</div>

score 1 · Answer 5 · answered Aug 16 '16 at 21:01

As Paulie_D mentioned it is not possible to transition to width: auto. You can instead add a max-width of the intended width of the non-hover state and transition to a max-width equal or greater as your intended hover state width. Example below:

#nav {
    position: fixed;
    top: 70px;
    left: 70px;
}

.button {
    position: relative;
    background: white;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 2px;
    border: 1px solid #eee;
    width: auto;
    min-width: auto;
    max-width: 15px;
    height: 20px;
    line-height: 20px;
    padding-right: 5px;
    transition: max-width 1s;
}

.button:hover {
    max-width: 200px;
}

.text {
    overflow: hidden;
}

.icon {
    width: 20px;
    float: left;
    margin-right: 5px;
    text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>

<div id="nav">
    
<div class="button">
<div class="icon"><i class="fa fa-home" aria-hidden="true"></i></div>
<div class="text">home</div>
</div>
    
</div>

How can I make the width transition smooth on hover?

5 Answers5