プレビュー画面では機能するCSSが実際の画面では機能しない

Question

前提・実現したいこと

ワードプレスでブログを作っています。
記事内で、文字にマウスオーバーで画像がポップアップ表示されるようにしたいです。
次のウェブサイトを参考にしました。
http://unipro.wp.xdomain.jp/wordpress-pop-up/

発生している問題・エラーメッセージ

・Chromeでのプレビュー画面
・Safariでの投稿記事の画面（プレビューではない）

では、思ったとおりに表示されますが、

・Chromeの投稿記事の画面（プレビューではない）

で表示されません。
リンクをクリックすると画像がポップアップ表示されますが、プレビューでできているようにマウスオーバーで表示されるようにしたいです。

該当のソースコード

下記のコードを
ワードプレスのテーマはCocoonを使っていて、下記のCSSを追加しました。
・外観→テーマエディター→スタイルシートの最下部
・外観→カスタマイズ→追加CSS
の両方を試したのですが上記の結果でした。

a.pop:hover{
position: relative;
}

a.pop span{
display: none;
position: absolute;
top: 1em;
left: 0;
}

a.pop:hover span{
display: inline;
width: 200px;
z-index: 10;
}

記事内のテキストに下記を入力しました。
<a class="pop" href="画像URL" alt="image">表示テキスト<span class=""><img src="画像URL" alt="image" /></span></a>

補足情報（FW/ツールのバージョンなど）

Wordpressを初めて使っているので、教えていただくのに不足している情報があるかもしれません。よろしくお願いいたします。

Answer 1

EWWW Image Optimizer
を無効にしたら機能しました。