nickpish nickpish - 2 years ago 77
CSS Question

Inline-block element drops on hover effect?

I'm trying to configure an extremely basic animation effect in which hovering over a div animates a

form
element alongside it from 0 to 100%
width
using a CSS transition. Here is a fiddle for reference. I'm experiencing two issues: first, in this case, the
<p>
element and
<form>
elements are not lining up vertically, despite being set to
display:inline-block
and
vertical-align:top
. Secondly, on hover in widening the
form
element to 100%, it's dropping below the
<p>
element; does anyone know what's going on here?



#wrapper {
display: inline-block;
position: absolute;
top: 0;
left: 0;
text-align: left;
vertical-align: top;
border: 1px solid #000;
margin: 0;
padding: 0;
}
#wrapper p {
font-size: 16px;
display: inline-block;
vertical-align: top;
text-transform: uppercase;
background-color: rgba(255, 255, 255, 0.5);
padding: 0.5em 1em;
cursor: pointer;
}
#wrapper:hover form#access {
width: 100%;
}
form#access {
display: inline-block;
width: 0%;
margin: 0;
padding: 0;
overflow:hidden;
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
}
form#access input {
font-size: 18px;
display: inline-block;
vertical-align: top;
padding: 0;
margin: 0;
border: none;
max-width: 100px;
}

<div id="wrapper">
<p>Enter code:</p>
<form id="access">
<input placeholder="code" id="access-code" name="access-code" type="text" tabindex="1" required>
</form>
</div>




Answer Source

You're setting your form to 100% width on hover, which would take the entire width of its parent. You can either lower that percentage so that it fits on a single line with the paragraph, or simply add this to #wrapper:

    white-space: nowrap;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download