#custom-search-form {
        margin:0;
        margin-top: 5px;
        padding: 0;
    }
 
    #custom-search-form .search-query {
        padding-right: 3px;
        padding-right: 4px \9;
        padding-left: 3px;
        padding-left: 4px \9;
        /* IE7-8 doesn't have border-radius, so don't indent the padding */
 
        margin-bottom: 0;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        -webkit-transition: width  0.2s ease-in-out;
    -moz-transition:width  0.2s ease-in-out;
    -o-transition: width  0.2s ease-in-out;
    transition: width  0.2s ease-in-out;
    }
 
    #custom-search-form button {
        border: 0;
        background: none;
        /** belows styles are working good */
        padding: 2px 5px;
        margin-top: 2px;
        position: relative;
        left: -28px;
        /* IE7-8 doesn't have border-radius, so don't indent the padding */
        margin-bottom: 0;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }
 
    .search-query:focus + button {
        z-index: 3;   
    }   
    .search-query:focus{
        width: 260px;
    }

.hopla {
  transition: box-shadow .3s;
  border-radius:2px;
  border: 1px solid #fff;
  float: left;
  text-align: center;
  background-color: #f0f0f0;
  margin-top: 20px;
}
.hopla img {
    width: 200px;
    height: 145px;
}
.hopla:hover {
   transition: box-shadow .3s;
   border-radius:2px;
   border: 1px solid #ccc;
   text-shadow: 1px 1px #0000ff;
   box-shadow: 0 0 11px rgba(33,33,33,.2);
   -webkit-box-shadow: 0 0 11px rgba(33,33,33,.2);
   -moz-box-shadow: 0 0 11px rgba(33,33,33,.2);
    }