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>

when i hover now it moves all the other text to display the image but i want the image to hover over the text and anything else on the page. not move the text to make room for the image. I know how to use jquery, and javascript but i didn't know what to use in this situation.

Have you tried setting your z-index on the image as well? That might solve it. — Keith Enlow
– Keith Enlow, Commented Nov 12, 2014 at 21:26

dfsq · Accepted Answer · 2014-11-12 21:27:41Z

1

Position image absolutely without any top/bottom values:

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>

answered Nov 12, 2014 at 21:27

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Felicyia Over a year ago

thank you that's exactly what i needed! i just over thought it way to much lolz

Istiak Tridip · Accepted Answer · 2014-11-12 21:33:36Z

0

Here is the answer of your 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>

See demo on JSDIDDLE

answered Nov 12, 2014 at 21:33

Istiak Tridip

1991 silver badge14 bronze badges

Collectives™ on Stack Overflow

css on hover text display image

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related