Simple Morphing Search with CSS3 & JS

Today we’d like to share a simple morphing effect with you. The idea is to have a search input in the upper right corner of the page and once the input is clicked, the whole search element expands to a fullscreen overlay. The fullscreen overlay has a bigger search input and some elements for showing related items or the search results. Note that we just made a dummy that does not actually search dynamically.