Css увеличение при наведении: Как увеличить картинку при наведении? | Рецепты

html — увеличение ширины при наведении влево

Вопрос задан 7 лет 5 месяцев назад

Изменён 7 лет 5 месяцев назад

Просмотрен 2k раза

Как заставить input увеличивать ширину при наведении влево? Сейчас когда наводишь на него ширина увеличавается в обе стороны(да, ширина input`a должна быть больше контейнера).
Вот пример:
HTML:

 <div>
      <input type="search">
    </div>  

CSS:

  div {
      width: 150px;
      margin: 0 auto;
      border: 2px solid black;
      text-align: right;
    }
    #search { 
    font-size: 12px; 
    cursor: pointer; 
    width: 10px; 
    text-indent: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
    background-position: center center;
    transition: width ease-in-out .  15s;
    } 
    #search:hover,#search:focus { 
    cursor: text; 
    width: 200px; 
    background-position: right 10px center; 
    text-indent: 0; 
    white-space: normal; 
    }

• html
• css

Вы сделали почти все правильно 🙂
Вам лишь надо было не давать таких подробных CSS инструкций на transition.

Тогда и абсолютного позиционирования не надо.

Чтобы раздвинуть input левее, надо лишь указать его длину побольше (что Вы сделали) + дать margin-left: -50px;.
Теперь транзакция между ними: вы указали width как параметр, но тогда проблема с margin — он не меняется. А если указать лишь transition-duration

, то браузер сам все пересчитает.

div {
  width: 150px;
  margin: 0 auto;
  border: 2px solid black;
  text-align: right;
}
#search {
  font-size: 12px;
  cursor: pointer;
  width: 10px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  background-position: center center;
  transition-duration: 0. 15s;
}
#search:hover,
#search:focus {
  cursor: text;
  width: 200px;
  background-position: right 10px center;
  text-indent: 0;
  white-space: normal;
  margin-left: -50px;
}

<div>
  <input type="search">
</div>

Учтите только, что вам может понадобиться добавить webkit CSS для кроссбраузерности

3

Как вариант

div {
  width: 150px;
  margin: 0 auto;
  border: 2px solid black;
  text-align: right;
  position: relative;
  height: 20px;
}

#search { 
position: absolute; top: 0; right: 0;
font-size: 12px; 
cursor: pointer; 
width: 10px; 
text-indent: 100%; 
white-space: nowrap; 
overflow: hidden; 
background-position: center center;
transition: width ease-in-out .15s;
} 

#search:hover,#search:focus { 
cursor: text; 
width: 200px; 
background-position: right 10px center; 
text-indent: 0; 
white-space: normal; 
}

<div>
  <input type="search">
</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.