Display Image On Text Link Hover CSS Only

Question

I have a text link. When the user hovers over the text link, I want an image to be displayed elsewhere on the page. I want to do this using css. I thought it could be done simply with a single line of code in the link like an onmouseover but it seems that requires other code elsewhere on the page.

I tried using the a:hover with the picture I want to show as a background-image but I don't think it can be manipulated to display in full instead of being clipped down to the size of the text link.

I see hundreds of results when I try to search for this but none of them are what I want. The closest thing I found was this.

http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/

But that's working with hovering over thumbnail images. I just want the user to hover over a single text link to have an image show on the page somewhere else. I found that gallery from this thread: Pop up image css link on hover

I don't want to deal with whatever that jquery is or too much scripts because I'm more familiar with css. Does anyone know of a simple way to do this or is there still no way, not even with all the changes made for css3?

Thanks!

score 38 · Answer 1 · answered Jul 28 '14 at 10:13

38

It can be done using CSS alone. It works perfect on my machine in Firefox, Chrome and Opera browser under Ubuntu 12.04.

CSS :

.hover_img a { position:relative; }
.hover_img a span { position:absolute; display:none; z-index:99; }
.hover_img a:hover span { display:block; }

HTML :

<div class="hover_img">
     <a href="#">Show Image<span><img src="images/01.png" alt="image" height="100" /></span></a>
</div>

answered Jul 28 '14 at 10:13

Naveen Web Solutions

705
10
13

This awesome, and does EXACTLY what I want it to, thank you! But, I'm running into an issue when it's inside of a table, it won't show the full size of the image because the size of the which is undefined, but I'm assuming is smaller, because of the link that corresponds to the image. Do you have any way around this? Is there a way for the image to "float" essentially above the table, and not necessarily be inside of the table? – Nomad Aug 12 '14 at 17:10
add these lines to .hover_img a:hover span css... height: 200px; width: 200px; overflow: visible; and it shows what @Spartacus38 wanted – V-SHY Apr 27 '18 at 16:42
This should be marked as a solution. Working very well and fast – Phong Sep 16 '20 at 11:38
For an "in-line" (e.g. within a sentence) mouseover image link, replace "div" with "span" in the answer, above. – Victoria Stuart Jul 04 '22 at 17:38

Fluidbyte · Accepted Answer · 2012-05-26T19:53:29.227

24

CSS isn't going to be able to call other elements like that, you'll need to use JavaScript to reach beyond a child or sibling selector.

You could try something like this:

<a>Some Link
<div><img src="/you/image" /></div>
</a>

then...

a>div { display: none; }
a:hover>div { display: block; }

edited May 26 '12 at 19:53

answered May 26 '12 at 19:15

Fluidbyte

5,162
9
47
76

Ah okay I kind of see what you mean with that. That it would be hidden but then displayed when I hover over the link because they're linked with the ">". I'll try and see what happens, thanks! – user1418023 May 26 '12 at 19:43
Awesome, I got it to work! Only change I made was setting the hover div to inline since block made it shift the links next to it after you were done hovering and then in the html part I gave the div a class that I set an absolute position for so the image in the div would show up where I wanted it to on the page. It works exactly how I wanted it to, thank you so much!!! – user1418023 May 26 '12 at 20:48
Oh I also exchanged a>div for a – user1418023 May 27 '12 at 10:48
@fluidbyte, I have tried to apply this solution in the style attribute of
– anrequete Dec 25 '16 at 13:00

score 1 · Answer 3 · edited May 04 '16 at 21:53

1

add

.hover_img a:hover span {
    display: block;
    width: 350px;
}

to show hover image full size in table change 350 to your size.

edited May 04 '16 at 21:53

Wai Ha Lee

8,598
83
57
92

answered May 04 '16 at 21:28

gta6cheats.club

11
1

score 1 · Answer 4 · answered Mar 05 '19 at 05:46

From w3 schools:

<style>
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>

<div class="tooltip">Hover over me
  <img src="/pathtoimage" class="tooltiptext">
</div>

Sounds like about what you want

score 1 · Answer 5 · answered Nov 07 '19 at 16:28

1

I did something like that:

HTML:

<p class='parent'>text text text</p>
<img class='child' src='idk.png'>

CSS:

.child {
    visibility: hidden;
}

.parent:hover .child {
    visibility: visible;
}

answered Nov 07 '19 at 16:28

Ido Bar Lev

426
5
6

score -7 · Answer 6 · answered May 26 '12 at 19:21

It is not possible to do this with just CSS alone, you will need to use Javascript.

<img src="default_image.jpg" id="image" width="100" height="100" alt="" />


<a href="page.html" onmouseover="document.images['image'].src='mouseover.jpg';" onmouseout="document.images['image'].src='default_image.jpg';"/>Text</a>

Display Image On Text Link Hover CSS Only

6 Answers6

Linked