CODEWITHSUNDEEP
htmlcsscss-transitionsfont-awesome
Sol
Sol

Reputation: 59

How can I make the width transition smooth on hover?

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:

  1. Get the house symbol inside a square so it looks like a little button. The text "home" shouldn't be visible at all.
  2. 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.

Upvotes: 2

Views: 6894

Answers (5)

Rudi Urbanek
Rudi Urbanek

Reputation: 1943

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>

Upvotes: 1

Oliver
Oliver

Reputation: 547

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>

Upvotes: 1

freak
freak

Reputation: 108

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;"

Upvotes: 3

andreas
andreas

Reputation: 16936

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>

Upvotes: 3

redolent
redolent

Reputation: 4259

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>

Upvotes: 1

Related Questions