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

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

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

 
【追記】
さっきAndroidのChromeで見たらちゃんと動いていたのでちゃんと動くのかもしれません。
あと画像を囲むspanにもちゃんとclassをつけてなかったせいで後で困りました。
【追記】
 

イカソース
 

【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;
}

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

 
 

参考URL

あと回答してくれたcss板の方に感謝(-人-)

スマホ向け

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

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

スーパーpreを改行
pre {word-wrap: break-word;}