21

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!

6 Answers 6

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>
4
  • 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 <td> 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, 2014 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, 2018 at 16:42
  • This should be marked as a solution. Working very well and fast
    – Phong
    Sep 16, 2020 at 11:38
  • For an "in-line" (e.g. within a sentence) mouseover image link, replace "div" with "span" in the answer, above. Jul 4, 2022 at 17:38
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; }
4
  • 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! May 26, 2012 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!!! May 26, 2012 at 20:48
  • Oh I also exchanged a>div for a<img same with hover so that I could just use the image without the anchor tag instead of having a div in there. It worked fine the other way in browsers but the links were lined up weird on my mobile device. Now they all match up. Thanks again! May 27, 2012 at 10:48
  • @fluidbyte, I have tried to apply this solution in the style attribute of <ul> as this: style="a>div { display: none; }; a:hover>div { display: block; }" and it does not work.
    – anrequete
    Dec 25, 2016 at 13:00
1

add

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

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

1

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

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.