Some designs show a small search icon, and then when a user hovers over the search area, it expands to show the search input box. A transition to slide out the search box, rather than just appearing is an optional, but nice flourish. This effect works by adjusting the width of the Search Box on hover and focus.
Sliding Search 1 expands when a user hovers over the content container. Sliding Search 2 expands when a user hovers over the search block. Both styles utilize a max-width, so that the search input does not get too wide. As you can see, the behavior with max-width is a little different when hovering over the search block, because you can hover over the area, but stil have to move the mouse to the right to get to the search input box. Without the max-width on search style 2, the search area would expand the full width and it would appear to hover behavior would be the same as search style 1.