CSSでやっている(?)検索フォームが浮き出てくるヤツの仕組みを教えてください！

Question

タイトルすらまともに書けないほど、何と表現すればいいか分からない状態なのですが、とりあえず実物を見ていただきたいです。

こちらのサイト様の右上にある虫眼鏡のマーク。
一般的に検索フォームにくっついているヤツです。

で、その虫眼鏡を押すと、何と表現すればいいのか、先ほどまでのページが薄暗くなり、検索フォームが拡大されてドン！と出てくる仕組みなんですが、これがどういう原理で動作しているのかわかりません。

よければご教授ください。
よろしくお願いします。

Comments

[Lhankor_Mhy]

わからないのはどこの部分ですか？　『ページが薄暗くなり』の部分ですか？　『検索フォームが拡大』の部分ですか？　それとも、虫眼鏡を押すと何かする仕組み自体が分からないですか？

[toutou]

参考サイトのURLとかは提示できますか？

Answer 1

実はそんなに難しい原理ではありません。

ページが薄暗くなるのは、半透明のブロック要素でページ全体を覆っているだけです。リアルで言うと、半透明の下敷きをページの上に重ねるようなイメージですね。

検索フォームが拡大されて出てくる仕組みは、半透明の要素の中にフォントサイズが大きい検索フォームを表示しているだけです。あえて言うならば、スタイル指定でテキストボックスの枠を消しているくらいで、別に特殊なことをしているわけではありません。