Material Search Transition

index.html

.header
  .header-content
    %h1 Material Search Effect
    %h2 Usign CSS Transitions
  .control{ tabindex: 1 }
    .btn
    %i.icon-search.ion-search
%i.icon-close.ion-ios-close-empty
.form
  %input.input-search(  type="text" placeholder="Start Typing")
  
.wrapper 
  #h2 by Luca Dimola

Material Search Transition.markdown

Material Search Transition

Material Zoom Effect using CSS

A Pen by Luca Dimola on CodePen.

License.

script.js

$('.control').click( function(){
  $('body').addClass('mode-search');
  $('.input-search').focus();
});

$('.icon-close').click( function(){
  $('body').removeClass('mode-search');
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

$primary-color: #22313F;
$secondary-color: #e91e63;
$placeholder-color: #EEE;

html,
body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

body { 
  margin:0;
  font-family: 'Roboto', sans-serif;
  color: #2d2d2d;
  letter-spacing: 0.2px;
  
  .wrapper {
    padding: 50px;
  }
  
  &.mode-search {
    overflow: hidden;
  
    .form,
    .icon-close {
      opacity: 1;
      transform: none;
      pointer-events: all;
    }
    
    .control {
      .icon-search {
        opacity: 0;
      }
      .btn {
        transform: scale(70);
      }
    }

  }
}

.header {
  position: relative;
  height: 50%;
  width: 100%;
  background: $primary-color;
  color: #FFF;
  
  .header-content {
    padding : 70px 50px;
    h1,h2 {font-weight: 200; }
  }
  
}


.control {
  width: 64px;
  height: 64px;
  position: absolute;
  bottom: -32px;
  right: 50px;
  cursor: pointer;
  
   .icon-search,
   .icon-close {
      transition: 0.2s ease-in-out;
    }
  
    &:hover .btn {
   box-shadow: 0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);
    
  }
  

  
}
/* Button */


.btn {
  width: 64px;
  height: 64px;

  border-radius: 100%;
  box-sizing: border-box;
  padding: 20px;
  background: $secondary-color;
  outline: 0;
  
  transform-origin: 50%;
  
  box-shadow: 0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  
}

.icon-search {
  position: absolute;
  top: 18px;
  left: 20px;
  font-size: 28px;
}

.icon-close {
  position: fixed;
  top: 30px;
  right: 30px;
  color: #FFF;
  font-size: 80px;
  
  opacity: 0;
  transform: translate( 10px, 0) rotate(90deg);
  transition: all 0.3s ease-in-out;
}


.form {
  height: 80px;
  position: absolute;
  top: 50%;
  left: 50px;
  margin-top: -40px;
  
  pointer-events: none;
  opacity: 0;
  transform: translate( 40px, 0);
  transition: all 0.3s ease-in-out;
  
  input {
    color: #fff;
    font-size: 54px;
    border: 0;
    background: transparent;
    -webkit-appearance: none;
    box-sizing: border-box;
    outline: 0;
    font-weight: 200;
    
    
  }
  
  ::-webkit-input-placeholder { 
    color: $placeholder-color;
  }
  :-moz-placeholder { 
     color: $placeholder-color;
     opacity:  1;
  }
  ::-moz-placeholder { 
     color: $placeholder-color;
     opacity:  1;
  }
  :-ms-input-placeholder {
     color: $placeholder-color;
  }
}

styles

<link href="http://fonts.googleapis.com/css?family=Roboto:400,300" rel="stylesheet" />
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />