リンクをhoverで画像がポップアップするcss

ざつがく

前回よりカードネームにマウスオーバーでイメージがポップアウトするようにしました。

ただこの方法ではスマホに対応できない(指を離すと画像が消える)ので、次回からこのブログにアクセスしたスマホを全て破壊します。


　
イカソース

【html】
こんにちは、かわいい<a href="#" class="p">犬<span><img src="/inu.jpg" alt="犬"></span></a>ですね。
【css】
a.p:hover {
    position: relative;
    text-decoration: none;
}
a.p span {
    display: none;
    position: absolute;
    top: 1em;
    left: 0;
}
a.p:hover span {
    border: none;
    display: block;
    width: 210px;
}

【サンプル】
こんにちは、かわいい犬犬ですね。


スマホ向け

『リンクをタップ→画像がポップアップ』がいいかなあ。

よくわからないのでまた今度･･･


【追記】
aタグにURLを指定しない(hrefを書かない)とスマホでもいい感じに動く気がします。

↓こちらもぜひ↓
www.cmons.me【追記】