Bootstrap Snippet How to make a zoom out effect in field of HTML form with CSS3 using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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

Related: See More

Questions / Comments:

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

Related: See More

Questions / Comments:

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