[CSS] Wysuwana wyszukiwarka po najechaniu kursorem

Question

Cześć,

Szukam takiego rozwiązania w CSS, jak na poniższym przykładzie. Chciałbym uzyskać wysuwany panel input po najechaniu na lupę: http://www.themesteam.com/wideh/index.php
Chodzi o tę wyszukiwarkę po prawej stronie pod "avatarem" i zależy mi, aby to było ez wykorzystania JS.

Answer 1

Jest to calkiem prosta sprawa, robisz sobie inputa, nadajesz mu niewielka szerokosc i jako background jakas lupke. Przy zdarzeniu :hover na inpucie zmieniasz jego szerokosc. Zeby "wysowanie" bylo plynne do stylow inputa dodajesz odpowiedni transition i w sumie tyle. :)

Pozdrawiam!

Comments

Dziękuję za pokierowanie, tak właśnie uczyniłem i wyszło naprawdę fajnie. Tylko mam problem, żeby lupkę zrobić z awesome fonts, więc musiałem niestety gifa, jako background wrzucić :D

Answer 2

Siema, mam nadzieję, że się przyda:)

http://webroad.pl/javascript/691-wysuwany-panel-css3-jquery

Comments

Super, opcja, ale niestety chciałem sam HTML + CSS, bez Jquery i JS, ale DZIĘKI! :)