how is this effect done with no javascript?

B

Ben C

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.
Click to expand...

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 :)
 
R

richard

Ben C said:
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 :)
Click to expand...

I did look in the CSS and it is in the hover. Apparently just replacing the
image with a larger one.
 
C

Chris

Ben said:
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 :)
Click to expand...
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?
 
B

Ben C

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?
Click to expand...

First thing is you need to lose the space between .small: hover (i.e.
..small:hover).

Second point is that this is a descendent selector:

..small:hover large
{
...
}

selects anything with a class of "large" that's a descendent (i.e.
nested inside) anything with a class of "small" that's also being
hovered over.

In your example, there's nothing with class "large", and the img, which
has class "small" has no descendents. So nothing matches the selector.

One way of doing it is this:

<style type="text/css">
/* big thing inside an anchor-- basically don't display it */
a .big
{
display: none;
}

/* big thing inside a hovered anchor-- do display it */
a:hover .big
{
display: inline;
}

/* small thing inside a hovered anchor-- don't display it */
a:hover .small
{
display: none;
}
</style>

...
<a href="#">
<img src="small.png" class="small"></img>
<img src="big.png" class="big"></img>
</a>

Note also the difference between "display: none" and "visibility:
hidden". display:none means carry on as if the element weren't there at
all, visibility:hidden means leave a hole in the page for it, but make
it invisible.
 
D

dorayme

Toby Inkster said:
The effect is explained on the page itself. Try reading the text.
Click to expand...

Any reason anyone knows why HTML could not be converted for

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">?

It works fine on Safari, have not looked at IEWin.

Interesting idea... I like it. I am not sure if the author's use
of px for font sizes or the XHTML is anything essential to the
idea.
 
C

Chris

Ben said:
First thing is you need to lose the space between .small: hover (i.e.
.small:hover).

Second point is that this is a descendent selector:

.small:hover large
{
...
}

selects anything with a class of "large" that's a descendent (i.e.
nested inside) anything with a class of "small" that's also being
hovered over.

In your example, there's nothing with class "large", and the img, which
has class "small" has no descendents. So nothing matches the selector.

One way of doing it is this:

<style type="text/css">
/* big thing inside an anchor-- basically don't display it */
a .big
{
display: none;
}

/* big thing inside a hovered anchor-- do display it */
a:hover .big
{
display: inline;
}

/* small thing inside a hovered anchor-- don't display it */
a:hover .small
{
display: none;
}
</style>

...
<a href="#">
<img src="small.png" class="small"></img>
<img src="big.png" class="big"></img>
</a>

Note also the difference between "display: none" and "visibility:
hidden". display:none means carry on as if the element weren't there at
all, visibility:hidden means leave a hole in the page for it, but make
it invisible.
Click to expand...

Thanks, it makes a lot more sense now.

Chris
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

how to achieve onmouseover/onmouseout effect? 3
Why is this WordPress comments form not submitting? 1
Hyperlink for entire table cell rather then just the text - how is it done? 26
Can't get started with this JavaScript 3
newbie: need help with this css/html 14
How does this work? 2
need help with simple html problem 9
What is causing error with this call to a .js file 4

Members online

No members online now.
Total: 31 (members: 1, guests: 30)
Robots: 406

Forum statistics

Threads
473,768
Messages
2,569,574
Members
45,048
Latest member
verona

Latest Threads

Top