企業サイトに実装されている動きについて

質問

https://tablet.wacom.co.jp/
↑ワコムのサイトです。
このトップに使われている動きについて教えてください。

商品やイベントなどのページへの入り口としてサムネイルが横5列（PC閲覧時）ほど並んでいます。
そのうちのひとつをマウスオーバーさせると関連する内容のサムネイルにむかって、２～５本くらい紐のようなものがピューっとでてきますが、これはどういった言語で達成されているのでしょうか。
もしライブラリーなどご存じでしたら教えてください。

上から３段目、左から３番目の「Bamboo Spark」のところがいっぱいピューっとでてきますので、一番わかりやすいかと思います。

どうぞよろしくお願いします。

回答No.1

hue2011

これはごく普通のCSSの技法でしょう。内容はJavascriptです。

不思議だと思ったら、ページのソースをみてください。
<div class=>で囲っていろいろと画像が見えていますが、サムネイルの場合タテに2倍の画像になっていますね。
これはマウスオーバー、マウスアウトしたときに上半分を出す下半分を出すかを設定してモノクロにしたりカラー表示にしたりしてるわけです。
この制御と同時に、線をひっぱってるんです。

お礼

ご教示ありがとうございました。