1

I have a simple todo list app. I want to increase the width of the text field when it is hovered on, over the course of 3 seconds.

I have used transition property but it is not working correctly. Problem is that the width increases instantly when the mouse pointer is hovered on the text field instead of increasing over the course of 3 seconds.

What am i doing wrong here?

Here's the code codepen

2 Answers2

2

It's because your input does not have width property in default state its auto.

Transition will not work auto to some value.

just add width property to input. it will work.

Here is the working code. 

.main-container {
  border: 1px solid #000;
  width: 45%;
  text-align: center;
}

input {
  width: 120px;
  padding: 8px;
  border-radius: 7px;
  transition: width 3s;
  border: 2px solid #222;
}

input:hover {
  border: 2px solid green;
  width: 300px;
}
<div class="main-container">
  <h1>To-Do List</h1>
  <input type="text" id="input-field" placeholder="enter new item" />
  <button id="btn-add-item">Add Item</button>
  <button id="btn-remove-item">Remove Last Item</button>
  <ul></ul>
</div>
<!--end of main container-->
Anzil khaN
  • 1,974
  • 1
  • 19
  • 30
1

You have to add the changing CSS Property in the input that will change on hover like this.

input{
     width: 100px;
     transition: width 3s ease-out;
}
input:hover{
    width: 300px;
}

Your code miss width in input tag CSS.

vishugosain
  • 180
  • 1
  • 9