css on hover text display image

Question

<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> 

Когда я нахожу, теперь он перемещает весь другой текст, чтобы отобразить изображение, но я хочу, чтобы изображение зависало над текстом и чем-либо еще на странице. не перемещайте текст, чтобы освободить место для изображения. Я знаю, как использовать jquery и javascript, но я не знал, что использовать в этой ситуации.

Answer 1

Положение изображения абсолютно без верхних/нижних значений:

img { 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 
.hover img { 
 
    display:none; 
 
    position: absolute; 
 
} 
 
.hover:hover img { 
 
    display:block; 
 
}

<p>other text</p> 
 
<h1 class="hover">Test 1 
 
    <img src="http://lorempixel.com/100/100" /> 
 
</h1> 
 
<p>other text</p>

Answer 2

Вот ответ на ваш вопрос.

<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> 

See demo on JSDIDDLE