I'm working on creating a unique input effect where the label moves up 100px when the input is focused, and then remains at the top when the user enters a value. If the input is empty and the user clicks outside, the label will return to its original position. I need help achieving this floating label effect. Thank you!
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
</head>
<style>
.form{width:600px; margin:auto; }
.input-conatiner{ width:400px; margin:60px auto ; text-align:center; height:35px ;width:320px; position:relative; }
.input-conatiner input{position:absolute; background:none; top:0; left:0; height:100%; width:100%; }
.input-conatiner label{position:absolute; top:0; left:0; z-index:9; transition:300ms ;}
.input-conatiner:hover input + label {color:red; transform:translatey(-150%);}
</style>
<body>
<form>
<div class="input-conatiner">
<input type="text"/>
<label>Hello there</label>
</div>
<div class="input-conatiner">
<input type="text"/>
<label>Hello there</label>
</div>
<div class="input-conatiner">
<input type="text"/>
<label>Hello there</label>
</div>
</form>
</body>
</html>