Image shows when hovering over text hyperlink, but need to change position of image relative to each link

Question

On my site, I have text hyperlinks, and when I hover the mouse over them, a small thumbnail image appears on the line below the link.

--example found on the following page: http://synapsecomic.com/synapse_archive.html--.

The initial code was found here: Display Image On Text Link Hover CSS Only.

Now I'd like to tweak it if is possible, stated below. To do this, I'm using only HTML and CSS:

HTML:

1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, (...), 
<a href="synapse_author.html">24,
<div><img src="comic_images/Panels/Master_List/synapse_00001.gif" width="150" height="100"   />
</div></a> 
25<br /><br />

<a href="synapse_author.html">26,
<div><img src="comic_images/Panels/Master_List/synapse_00000.gif" width="150" height="100" />
</div></a>
27, 28, 29, 30, 31

CSS:

a>div { display: none; }
a:hover>div { display: block; position:absolute; border: 5px solid #FFF;}

If you hover over link 26, the thumbnail displays directly below the link, which is good. My issue is that when you hover over link to 24, the thumbnail displays aligned along the left instead of right below the text. This will probably be an issue for all of the other pages as well (just haven't turned any of them into links yet). Is there any way to have the thumbnail appear directly below the link it is attached to?

If possible, explain your answer in layman's terms. I'm still really new to coding (I'm surprised I've gotten this far honestly). I appreciate your help, and will clarify any of my explanations if necessary.

score 0 · Accepted Answer · answered Nov 13 '13 at 16:52

Why not adopt an approach more like this which doesnt nest block elements within anchor tags (not ideal..)

HTML:

<ul>
    <li>
        <a href='#'>Item 1</a>
        <ul>
            <li>
                image 1
            </li>       
        </ul>
    </li> 
    <li>
        <a href='#'>Item 2</a>
        <ul>
            <li>
                image 2
            </li>       
        </ul>
    </li>     
</ul>

CSS:

ul, li{
    list-style:none;
    margin:0;
    padding:0;
}
ul ul{
    display:none;
}
ul li{
    position:relative;
    display:inline;
}
ul li:hover ul{
   display:block;
   position:absolute;
}

score 0 · Answer 2 · answered Nov 13 '13 at 16:52

modify css to:

.archivepage_body a {
   position: relative;
}
a > div {
   display: none;
   position: absolute;
   left: 0px;
   top: 0px;
}

you can adjust the "left" and "top" values to find a suitable position. Also it will be good to give a CSS classname to "a" tags and use that class for styling.

As an example: <a class="link" href="synapse_author.html">24,..... then in style instead of "a > div" use ".link > div"

Image shows when hovering over text hyperlink, but need to change position of image relative to each link

2 Answers2