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!
This question is related to
css
image
hyperlink
hover
onmouseover
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;
}
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
add
.hover_img a:hover span {
display: block;
width: 350px;
}
to show hover image full size in table change 350 to your size.
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>
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>
Source: Stackoverflow.com