"How to make a zoom out effect in field of HTML form with CSS3"
Bootstrap 3.3.0 Snippet by amitchaudharyj

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h2>Ask a Question</h2> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend>Please fill the form</legend> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="Username">Username</label> <div class="col-md-4"> <input id="Username" name="Username" type="text" placeholder="Enter Your Username" class="form-control input-md fieldPopUp"> </div> </div> <!-- Password input--> <div class="form-group"> <label class="col-md-4 control-label" for="passwordinput">Password</label> <div class="col-md-4"> <input id="passwordinput" name="passwordinput" type="password" placeholder="Enter your password" class="form-control input-md fieldPopUp"> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="selectbasic">Select a service</label> <div class="col-md-4"> <select id="selectbasic" name="selectbasic" class="form-control fieldPopUp"> <option value="Web Desiging">Web Desiging</option> <option value="Logo">Logo</option> <option value="Blog">Blog</option> </select> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="Question">Write your Question</label> <div class="col-md-4"> <textarea class="form-control fieldPopUp" id="Question" name="Question">Write your Question</textarea> </div> </div> <!-- Button --> <div class="form-group"> <label class="col-md-4 control-label" for="singlebutton"></label> <div class="col-md-4"> <button id="singlebutton" name="singlebutton" class="btn btn-primary">Ask Now</button> </div> </div> </fieldset> </form>
.fieldPopUp { webkit-transition: -webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s; -o-transition-property: width,height,-o-transform,background,font-size,opacity; -o-transition-duration: 1s,1s,1s,1s,1s,1s; -moz-transition-property: width,height,-o-transform,background,font-size,opacity; -moz-transition-duration: 1s,1s,1s,1s,1s,1s; transition-property: width,height,transform,background,font-size,opacity; transition-duration: 1s,1s,1s,1s,1s,1s; } .fieldPopUp:hover { width: 250px !important; height: 50px; Z-index: 99; transform: scale(2); margin-bottom: 20PX; }

Related: See More


Questions / Comments: