put label over textfield on hover change the location css

I need to design this text field initially on page load it will be like below image

on hover the label will move up and color will change

any solution link for the same.

Thanks

You can use combination of ~ and :placeholder-shown css selectors to achieve this.

Here is an example :

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.container {
width: 300px;
padding: 20px;
margin: 0 auto;
font-family: 'Inter', sans-serif;
}
.floating-label-content {
position: relative;
margin-bottom: 20px;
}
.floating-label {
color: #000;
font-size: 13px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 15px;
top: 11px;
padding: 0 5px;
background: #fff;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
.floating-input {
font-size: 12px;
display: block;
width: 100%;
height: 36px;
padding: 0 20px;
background: #fff;
color: #000;
border: 1px solid #000;
border-radius: 4px;
box-sizing: border-box;
}
.floating-input:focus {
outline: none;
border: 1px solid #3D85D8;
}
.floating-input:focus~.floating-label {
top: -8px;
font-size: 13px;
color: #3D85D8;
}
.floating-input:not(:placeholder-shown) {
color: #3D85D8;
border: 1px solid #3D85D8;
}
.floating-input:not(:placeholder-shown)~.floating-label {
top: -8px;
font-size: 13px;
color: #3D85D8;
}

<!-- language: lang-html -->

<div class="container">
<div class="floating-label-content">
<input class="floating-input" type="text" placeholder=" ">
<label class="floating-label">Your Name</label>
</div>
</div>

<!-- end snippet -->

You can check this example and adapt it for your use:
https://css-tricks.com/float-labels-css/