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.

input-zoom-on-focus

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.


Anand Roshan

Author: Anand Roshan

An entrepreneur, programmer and a passionate artist who loves to work independently. Get social: Twitter | Google + | Artist Page

One comment on “Input box zoom effect on focus using jQuery and CSS3”

Leave a Reply

Your email address will not be published. Required fields are marked *