Correct centering of w / element: hover over its width

Question

I have an input type, I would like the center to be correct when you focus / hover over it.

So, I want it to expand the width in the middle instead of the right one, or that makes it look like it. (A little strange to explain)

Here is the code:

.container {
	margin-top: 50px;
	margin-left: auto;
	margin-right: auto;
	width: 142px;
}

.textbox { 
   border: 1px solid #848484; 
   -moz-border-radius-topleft: 30px;
   -webkit-border-top-left-radius: 30px;
   border-top-left-radius: 30px;
   -moz-border-radius-topright: 30px;
   -webkit-border-top-right-radius: 30px;
   border-top-right-radius: 30px;
   outline: 0; 
   height: 25px; 
   width: 125px; 
   padding: 2px 20px 2px 20px;
  }
  
input { 
   text-align: center;
   width: 100px;
   transition: ease-in-out, width .35s ease-in-out;
   margin-bottom: 3px;
   margin-top: 3px;
}

input:focus { 
   width: 150px;
   margin-bottom: 3px;
   margin-top: 3px;
}

input:hover { 
   width: 150px;
   margin-bottom: 3px;
   margin-top: 3px;
}

/* Ignore this */

p {
  margin-top: 30px;
  color: #a6a6a6;
  text-align: center;
}

<!-- Thanks for helping :p !-->

<div class="container">
   <input type="text" class="textbox" placeholder="Some text in here!">
</div>

<!-- Ignore !-->
<p> So as you can see the width will expand to the right, how would I be able to center it while it moving and keeping it centered?</p>

Run codeHide result

Thank,

Answer 1

The problem you are facing is caused by a fixed width value .containerthat is less than the width applied to your input on :hover.

text-align: center ( ) ,

.container {
	margin-top: 50px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.textbox { 
   border: 1px solid #848484; 
   -moz-border-radius-topleft: 30px;
   -webkit-border-top-left-radius: 30px;
   border-top-left-radius: 30px;
   -moz-border-radius-topright: 30px;
   -webkit-border-top-right-radius: 30px;
   border-top-right-radius: 30px;
   outline: 0; 
   height: 25px; 
   width: 125px; 
   padding: 2px 20px 2px 20px;
  }
  
input { 
   text-align: center;
   width: 100px;
   transition: ease-in-out, width .35s ease-in-out;
   margin-bottom: 3px;
   margin-top: 3px;
}

input:focus { 
   width: 150px;
   margin-bottom: 3px;
   margin-top: 3px;
}

input:hover { 
   width: 150px;
   margin-bottom: 3px;
   margin-top: 3px;
}

/* Ignore this */

p {
  margin-top: 30px;
  color: #a6a6a6;
  text-align: center;
}

<!-- Thanks for helping :p !-->

<div class="container">
   <input type="text" class="textbox" placeholder="Some text in here!">
</div>

<!-- Ignore !-->
<p> So as you can see the width will expand to the right, how would I be able to center it while it moving and keeping it centered?</p>

Hide result