jquery - css on hover text display image -

jquery - css on hover text display image -

<style> img { height: 100px; width: 100px; } .hover img { display:none; } .hover:hover img { display:block; } </style> <p>other text </p> <h1 class="hover">test 1 <img src="ghost.jpg"/></h1> <p>other text </p>

when hover moves other text display image want image hover on text , else on page. not move text create room image. know how utilize jquery, , javascript didn't know utilize in situation.

position image absolutely without top/bottom values:

class="snippet-code-css lang-css prettyprint-override">img { height: 100px; width: 100px; } .hover img { display:none; position: absolute; } .hover:hover img { display:block; } class="snippet-code-html lang-html prettyprint-override"><p>other text</p> <h1 class="hover">test 1 <img src="http://lorempixel.com/100/100" /> </h1> <p>other text</p>

jquery css image text hover