Q:

Show hidden element on  tag

I have an image in my HTML code:
<img src="main.jpg" />

I want to show a smaller linkable image over main.jpg when I hold mouse over main.jpg.
(This image is link)
I prefer to use smaller image by CSS.
I tried this:
<div class="img"><img src="main.jpg" /></div>
<div class="resize"><a href="resizepic.jpg">resize imgae</a></div>

.resize{
    background:url(resize.jpg) left top no-repeat;
    position:absolute;
    top:0;
    left:0;
    desiplay:none;
    text-indent: -9999px;
}

I want do this just with pure CSS (no JS)...Do you know a trick or an alternative way to  do it?

A:

this will solve your problem
<div class="img"> 
    <img src="main.jpg" /> 
    <div class="resize"><a href="resizepic.jpg">resize imgae</a></div>
</div>

Also correct your css class
change desiplay:none;  to display:none;

