Input box zoom effect on focus using jQuery and CSS3

Datetime:2017-04-20 05:28:58         Topic: jQuery  CSS3          Share        Original >>
Here to See The Original Article!!!

Let’s see how can we do an input zoom effect on focus using jQuery and CSS3. You can also create this effect using javascript only but it will be more easy with jQuery.

HTML

You can do this in two methods. You can have an outer div that has a border with child input box without border and animate the outer div or you can simply animate the input box itself. For this tutorial, I’m going to animate the outer div because I want the input box to stay its place and size.

Let’s have this simple html markup

<div class="inputwrap">
 <input type="text" name="some1" placeholder="Enter a value">
</div>
<div class="inputwrap">
 <input type="text" name="some2" placeholder="Enter a value">
</div>
<div class="inputwrap">
 <input type="text" name="some3" placeholder="Enter a value">
</div>

We have a div with the class inputwrap and an input box inside each divs.

CSS

input{
 padding: 2%;
 width: 96%;
 border: 0;
 outline: 0;
}
.inputwrap{
 -webkit-transition: all 0.3s ease;
 -transition: all 0.3s ease;
 width: 100%;
 margin-bottom: 20px;
 border: 5px solid #333;
}
.inputwrap.focused{
 padding: 10px;
 margin-top:-10px;
 margin-left: -10px;
 position: relative;
 border: 5px solid #d00;
 -webkit-transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 transition: all 0.3s ease;
}

We have css transition applied for a class called .focused so, whenever our .inputwrap has this class it will be animated.

We are using transition so remember it wont work on older browsers.

jQuery

$(".inputwrap input").on("focus", function(){
	$(this).parent(".inputwrap").addClass("focused");
}).on("blur", function(){
	$(this).parent(".inputwrap").removeClass("focused");
});

We are just simply adding the class .focused when an input box gets focused and removing it when it gets blurred.

That’s it.

If you have an easier method to do this effect, you can always comment below. Thanks.








New

Put your ads here, just $200 per month.