Posted by Chris on 09/30/06 18:00

Ben C wrote:

> On 2006-09-30, richard <don@john.son> wrote:
>> http://www.oswd.org/design/preview/id/2849
>>
>> When moving mouse over the 3 small images, another larger one pops up.
>> As I did not see any specific JS in the source, am I assuming correctly
>> that xhtml can emulate this effect?
>> I haven't been able to look at the CSS yet. Just curious.
>
> You can use the :hover pseudo for this:
>
> .large
> {
> visibility: hidden;
> }
>
> .small:hover .large
> {
> visibility: visible;
> }
>
> that kind of thing.
>
> I haven't looked at their CSS either :)
This is exactly something I need, but it doesn't work for me, so can I ask
you to be a bit more specific? I put the "small" class in my img tag, and
added a width and height for large:

..large
{
width: 50px;
height: 50px;
visibility: hidden;
}

..small: hover .large
{
visibility: visible;
}

<a href="/" title=""><img src="icon.png" class="small" alt="" /></a>

So why does it not work? What am I missing?

[Back to original message]