How to make a search box with Hover effect?

Question

When you click the search icon the search box opens.

.busca-organica{
	width:120px;
	height:27px;
	background-color:#FFF;
	display:none;
}

.btn-pesq{
	display:block;
}

<div class="btn-pesq"><img src="img/lupa.png"></div>

<form action="busca.html" methode"GET">

 <input type"text" name="busca-organica" class="busca-organica"/>
 
</form>

Answer 1

I will leave an alternative using jQuery and css.

Suppose you have a button and an input in your form. Let’s hide the input, and show only when you click the button (magnifying glass);

For this, we will use the function Animate() jQuery, to achieve the desired effect.

The code would look like this:

( function() {
	$('#btn-search').on('click', function(e) {
		e.preventDefault();
		$('#search').animate({width: 'toggle'}).focus();

	});
} () );

@charset "utf-8";
@import url(http://weloveiconfonts.com/api/?family=fontawesome);

a[class*="fontawesome-"]:before,
span[class*="fontawesome-"]:before {
	display: block;
	font-family: 'FontAwesome', sans-serif;
	-webkit-font-smoothing: antialiased;
}

/* ---------- GENERAL ---------- */

body {
	background: #ccc;
	font: 87.5%/1.5em 'Open Sans', sans-serif;
	margin: 0;
}

a {
	text-decoration: none;
}

button {
    -webkit-appearance: button;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 100%;
    line-height: inherit;
    margin: 0;
    padding: 0;
    text-transform: none;
}

button::-moz-focus-inner {
	border: 0;
	padding: 0;
}

fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

input {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	line-height: inherit;
	margin: 0;
	padding: 0;
}

input:focus {
	outline: none;
}

input[type="search"] {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------- CLASSES ---------- */

.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after {
	content: "";
	display: table;	
}
.clearfix:after { clear: both; }

.container {
	left: 50%;
	margin: -17px 0 0 -186px;
	position: absolute;
	top: 50%;
	width: 372px;
}

/* ---------- TOOLBAR ---------- */

.toolbar {
	color: #fff;
}

.toolbar li {
	float: right;
}

.toolbar li:first-child a { border-radius: .5em 0 0 .5em; }
.toolbar li:last-child button { 
    border-radius: 0.5em 0 0 0.5em;
}

.toolbar a,
.toolbar input[type="search"],
.toolbar button {
	background: #3598db;
	color: #fff;
	display: block;
	padding: .5em 1em;
	position: relative;
}

.toolbar a:hover,
.toolbar input[type="search"]:hover,
.toolbar input[type="search"]:focus,
.toolbar button:hover {
	background: #2a80b9;
}

.toolbar input[type="search"] {
	display: none;
	height: 21px;
	width: 200px;
}

.toolbar input[type="search"]::-webkit-input-placeholder { color: #fff; }
.toolbar input[type="search"]::-moz-placeholder { color: #fff; opacity: 1; }
.toolbar input[type="search"]:-moz-placeholder { color: #fff; opacity: 1; }
.toolbar input[type="search"]:-ms-input-placeholder { color: #fff; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

		<form action="javascript:void(0);" method="get">
			
			<fieldset>
				
				<ul class="toolbar clearfix">
					<li><input type="search" id="search" placeholder="O que você está buscando?"></li>
					<li><button type="submit" id="btn-search"><span class="fontawesome-search"></span></button></li>

				</ul>

			</fieldset>

		</form>

	</div> <!-- end container -->

See a example in Jsfiddle here.

Source: Bootsnipp

Other examples you can find in this answer!