Слайд вложенных Div в панели поиска

Мне нужно создать панель поиска, содержащую вход для поиска, кнопку "Параметры", а затем 3-я кнопка, когда зависание будет расширяться влево, нажав предыдущие 2 элемента.

Я попытался сделать это с помощью CSS, но не могу заставить другие элементы слайд-шоу красиво, поэтому я предполагаю, что это нужно сделать с помощью jQuery?

Когда пользователь наводится над стрелкой, div открывается влево, чтобы открыть слово "поиск" вместе с 20% -ным серым наложением.

Кнопка "Параметры" должна скользить влево, пока кнопка поиска расширяется, но ширина всей обертки поиска не должна изменяться и перемещаться.

С точки зрения кода это то, где я сейчас:

HTML:

        <div class="search-box">
            <input name="" type="text" placeholder="search" class="input"><a href="#" class="option">options</a>
            <div id="search-button">
                <div id="search-button-text">search &nbsp;</div>
                <a href="#"><img src="/static/images/search-btn.jpg" alt=""></a>
            </div>
        </div>

Некоторые JS я пробовал без везения:

    $(".search-button").hover(function() {
        $('search-button-text').style.display = 'block-inline';
   });

CSS:

.search-box {
    width:582px;
float:right;
clear:both;
}

.search-box .input {
float:left;
/*min-width: 500px;*/
border:1px solid #231f20;
height:25px !important;
font:16px "JosefinSans Regular", Arial, Helvetica, sans-serif;
margin:0px;
}

.search-box .option {
    display: block-inline;
float:left;
    height:20px !important;
    width: 50px;
border:1px solid #231f20;
    padding-top:7px;
    text-align: center;
border-left:none;
border-right:none;
color:#000;
text-decoration:none;
font-size:13px;
}

#search-button {
    display:inline-block;
}

#search-button-text {
    display: none;
    visibility: hidden;
}