Cacher is the code snippet organizer for pro developers

http://www.wpbeginner.com/wp-themes/how-to-add-a-search-toggle-effect-in-wordpress/

<div class="site-header-inner col-sm-10">

	<?php $header_image = get_header_image();
	if ( ! empty( $header_image ) ) { ?>
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
			<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="">
		</a>
	<?php } // end if ( ! empty( $header_image ) ) ?>


	<div class="site-branding text-center">
		<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="<?php echo get_template_directory_uri() . '/images/logo.jpg'; ?>"></a></h1>
		<p class="lead"><?php bloginfo( 'description' ); ?></p>
	</div>

</div>

<div class="col-sm-2">
	<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
		<label>
			<span class="screen-reader-text">Search for:</span>
			<input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:" />
		</label>
		<input type="submit" class="search-submit" value="Search" />
	</form>			
</div>





CSS:
.search-form {
	position: absolute;
	right: 200px;
	top: 10px;
}

.search-field {
	background-color: transparent;
	background-image: url(images/search-icon.png);
	background-position: 5px center;
	background-repeat: no-repeat;
	background-size: 50px 41px; /* needs to have the dimensions of search-icon.png */
	border: none;
	cursor: pointer;
	height: 50px;
	margin: 3px 0;
	padding: 0 25px 0 45px;
	position: relative;
	-webkit-transition: width 400ms ease, background 400ms ease;
	transition:         width 400ms ease, background 400ms ease;
	width: 0;
}

.site-header .search-field:focus {
	background-color: #fff;
	border: 2px solid #c3c0ab;
	cursor: text;
	outline: 0;
	width: 230px;
}
.search-form
.search-submit { 
display:none;
}