Brentonr25 Brentonr25 - 4 years ago 115
HTML Question

jQuery slide html element

I am making a basic div for a social navigation bar that runs vertical along the left side of the webpage. I am trying to make each individual div slide right to a width of 64px when you hover over it, and return to normal width when your mouse leaves it.

<div class="social-buttons">
<div class="social-btn"><b>f</b></div>
<div class="social-btn"><b>G+</b></div>
<div class="social-btn"><b>T</b></div>
<div class="social-btn"><b>E+</b></div>
</div><!-- end of social-buttons -->

.social-btn {
display: block;
border-radius: 0px;
font-family: Arial;
color: #ffffff;
font-size: 16px;
background: #206999;
text-align: center;
padding-top: 16px;
padding-bottom: 16px;
width: 48px;
height: 48px;
text-decoration: none;
}

Answer Source

Add this to your CSS:

  .social-btn:hover {
width: 64px;
transition-property: width;
transition-duration: 1s;
}

  .social-btn {
transition-property: width;
transition-duration: 1s;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download