This one I put an invisible draw shape
over the the word picture
and grouped that with the image

Amazing Picture of Lightning caused by the Sakurajima volcano, in Japan

All these are just one effect that uses two Web Studio Groups
if you have questions after the tutorial ask them here: WSnext Forum

Web Studio group division toggle


Web Studio - WS division toggle - by Web Studio Next

After the secure "Paypal" link you will be taken to the code page


These effects are not officially part of Web Studio
If you have questions see the
custom coding page



One Web Studio group is made and given the class "top"
then you group it all together and add the class "both"
When you mouse over "both" the "top group" fades in

An image (both) with text on an
opaque draw shape (top)

Bacson, Langson, Vietnam

An image (both) with multiple text objects
and a link on an draw shape (top)

A thumbnail I made with WS (both) and
the larger image with a caption (top)

So almost anything can be in the "top group"
and stay where you put it, (on top of a picture for example)
it will then fade in when you hover over the "both group"

Invisible Draw shape (both) with an Image
and draw shape border (top)

Text (both) and a protected graphic image that has the WSnext "video add on" link (top)

This example uses the top heading text as the "both group" and I underlined it so it looks like a link. Then I put the video ADD ON link (not included) on the spitfire picture in the "top group"

The amazing British Spitfire
click on the thumbnail for the video

Submarine Spitfire

An image (both) with text on an
draw shape as a pop up fact (top)

Lavender Fields, France

All of these examples use the same couple of lines of code
you put in the HEAD. All of them also use the same two class names
"top" and "both" so it is very easy to use, and you can do a lot with it.

Lavender Fields, France

Borobudur, Indonesia

Text (both) and Text links styled using my link tutorial to make a drop down menu  and
a background draw shape (top)

You have to use a draw shape behind these
but you could use one that is transparent

You can un-group and take them apart
make any changes you like
then re-group them again

A Text Link (both) with text links on an
draw shape as a mega menu (top)

The draw shape behind these makes it so
they don't fade in and out between links

Button (both) and another button (top)


You could put a link on the top button too
I used a text object and hid it behind the
top button so I could use group

Button (both) and another button and the PopUP Div ADD ON (top)

This one I added a flash music player (not included)
to the pop up div ADD ON (not included)
as an example of what can be done


Black and white image (both)
and a color image (top)

I used the built in image editor to make
the black and white and grouped the "top"
with two text (one black for a shadow) for the caption

Invisible draw shape (both) and 
another colored draw shape with text
and a picture for a TOOLTIP (top)

Okay let's fool around with tooltips that we
 can combine with almost anything we
 want. Not only that but we can put the
tooltip where we want
and we could even add an image to the

This one I used invisible draw shapes
and put those over the text that I underlined
so they just look like links

Some text with a link to WSnext HOME

Aspen, Colorado

Aspen, Colorado


There is a lot more you can do
with this effect above is only a
few examples to get you started, have fun!

If you have any questions with this effect
you can ask at the WSnext forum

Lucca, Tuscany, Italy

This can be a description
with a link
WSnext Home

When you group
stuff the first one you select goes first or behind so draw shape first then the text