css - div にカーソルを合わせるとグレーの画像を表示し、グレーの画像にカーソルを合わせるとカラー画像を表示します

Question

私はこのようなことをしたい：
divにテキストを表示
し、ホバーでテキストの横にグレーの画像を表示し、グレーの画像にホバーするとカラー画像を表示します。

これが私がソファーでやったことです：

HTML:

<div class='line'>text text 1<a href='#1'><div class='image'>
</div></a></div>

<div class='line'>text text 2<a href='#2'><div class='image'>
</div></a></div>

CSS

.image                  { visibility:hidden; height:48px;width:48px;background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSZP-OED3SNXR6bzDbYbAxQUUBIobAu60g1Ft9Wapv_ysUd37ANcw);}
.line :hover .image       {visibility:visible;}     
.line .image:hover image        {background-image:     url(http://t2.gstatic.com/images?q=tbn:ANd9GcStjRtP8jtJNFLgnzWT-plN-JGLLb0L4ZSD4wqKksAs517dvj_rSA);}

http://jsfiddle.net/UT56U/1/

jQueryやJSなしで可能ですか?