助けて〜 花犬 枕? 枕? 休んでるときも 鋭さは忘れない 眼光鋭い! ドラゴン |
画像やテキストリンクの上にマウスをのせて下さい。 画像がポップアップされて表示されます。 画像やテキストリンクの上からマウスをはずすとポップアップされた画像も消えます。 ポップアップされた画像はポラロイドの様に余白と枠がついて画像の下に文字を表示させます。 ポップアップされる画像の位置を変える事もできて、余白の色、枠線の色、文字の色も変える事ができます。 /*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */ .thumbnail{ position: relative; z-index: 0; } .thumbnail:hover{ background-color: transparent; z-index: 50; } .thumbnail span{ /*CSS for enlarged image*/ position: absolute; background-color: lightyellow; ・・・・余白の色 padding: 5px; left: -1000px; border: 1px dashed gray; ・・・・・枠の色 visibility: hidden; color: black; ・・・・・文字の色 text-decoration: none; } .thumbnail span img{ /*CSS for enlarged image*/ border-width: 0; padding: 2px; ・・・・余白の幅 } .thumbnail:hover span{ /*CSS for enlarged image on hover*/ visibility: visible; top: 0; ・・・・・上からの位置 left: 60px; ・・・・・左からの位置 } |