[CSS]Hoverしたら、ふきだしを表示する方法を教えて下さい

Question

このサイトでは、顔の画像をHOVERすると、ふきだしが出ます。
http://www.bloomberg.com/billionaires/2016-08-25/aaa

![]

要素をINSPECTしてみても、分からないの点が2つあります。
①application...と表示されます。
②背景の画像が小さい

.head .post-it { application...
    position: absolute;
    top: -10px;
    left: 65px;
    width: 21px;
    height: 31px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAfCAYAAAAIjIbwAAAAAXNSR…kTSUGLxU2VCZdVC+pBNVjI1Tl1ZePV0ixAuxysBOV2Jf4Gj82OG+a84P4AAAAASUVORK5CYII=) no-repeat;
    display: none;

これはCSSだけではなく、別の方法？で行っているのでしょうか？

アドバイスを頂けましたら幸いです・・・

Answer 1

CSSで設定されているのは画像の境界線の黄色い部分だけで、吹き出しはスクリプトですね。
背景の画像が小さいというのはどういうことでしょうか？
顔は2580*100と横一列のスプライト画像にしているようです。

Comments

[退会済みユーザー]

ありがとうございます。もしよろしければ追加で質問です。すいません。
①スクリプトを読みたいのですが、調べ方があれば教えて下さい。
②背景の画像をブラウザーで見てみると、小さかったので、文字列の長さにあわせて、
動的にフィットしているのかなと思いました。
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAfCAYAAAAIjIbwAAAAAXNSR…kTSUGLxU2VCZdVC+pBNVjI1Tl1ZePV0ixAuxysBOV2Jf4Gj82OG+a84P4AAAAASUVORK5CYII=) no-repeat;

Answer 2

hover ポップアップ
で、google 検索すると、情報を得られます。

参考情報

• cssだけでホバー時にバルーンポップアップを表示させる http://omachizura.com/note/css%E3%81%A0%E3%81%91%E3%81%A7%E3%83%9B%E3%83%90%E3%83%BC%E6%99%82%E3%81%AB%E3%83%90%E3%83%AB%E3%83%BC%E3%83%B3%E3%83%9D%E3%83%83%E3%83%97%E3%82%A2%E3%83%83%E3%83%97%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%95%E3%81%9B%E3%82%8B.html

• HTML/CSSで実装できる！今どきデザインのホバーエフェクト30個まとめ http://photoshopvip.net/88174

• モーダルウィンドウ（ポップアップウィンドウ）をjQueryとCSSで簡単に作る手順 http://webdesign.practice.jp/modal_jquery_css

Comments

[退会済みユーザー]

ありがとうございます。勉強してみます。

[退会済みユーザー]

jQueryでやったほうが、ブラウザーの問題があるから、
楽かもしれませんね。