'Centering an Element correctly w/ :hover while it's expanding width

I would like to center an input perfectly in the middle when you focus or hover on it.

Therefore I want it to expand the width in the middle instead of the right or something that makes it looks like it.

The code: 

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

.textbox { 
   border: 1px solid #848484; 
   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:hover, input:focus { 
   width: 150px;
   margin-bottom: 3px;
   margin-top: 3px;
}
<div class="container">
   <input type="text" class="textbox" placeholder="Some text in here!">
</div>
htmlcss


Solution 1:[1]

The problem you are experiencing is caused by the fixed-width value of .container, which is less than the width you are applying to your input on :hover.

Eliminating the fixed width and applying a property of text-align: center (to center the input) results in the hover effect functioning as expected

.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's moving and keeping it centered?</p>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Robert

Related Questions