はてなブログ、記事本文中のリンクをhoverした時、画像がポップアップするようにしたいです。

http://magic.wizards.com/ja/articles/archive/daily-deck/20150814
↑のサイトのような感じです。

下記のように書いたのですが、

[html]
　こんにちは、かわいい<a href="#" class="popup"><span><img src="/inu.jpg" alt="犬">犬<span></a>ですね。

[css]
　a.popup span {
　　position: relative;
　}
　a.popup span img {
　　display: block;
　　width: 0;
　　height: 0;
　　z-index: 0;
　}
　a.popup:hover span img {
　　position: absolute;
　　left: 0;
　　top: 0;
　　width: 300px;
　　height: 400px;
　　z-index: 1;
　}

imgがblockのためか、<a>の前後が改行されてしまいます。
inlineにすると、imgの幅が<a>と同じ幅になってしまいます。
なにかよい書き方はありますでしょうか？