リンクを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;
}

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

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

参考URL

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

スマホ向け

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

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

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


まとめ

でも実益のないものをいくら装飾してもしょうがないよね。

*1:aにhover→画像ではなく、imgにhover→画像をやりたい時にimgをspanで囲えないので、bあたりを代わりに持ってきてfont-weightをnormalにみたいなよくない感じに書かなければいけなくなった

広告を非表示にする