Now still in "Insert Object HTML" and with the image still selected go to "Inside Object"
and paste this so the image has a relative position and OK to save

Web Studio Next Animated Menu

If you are not familiar with web studio refer to the instruction page

Making an animated menu using pictures in web studio

Add a class and relative postion the image

Hover over the images above, you've probably seen this effect for social linking.
I was asked today if I could show you how to do this in web studio.
Put the picture on the page and link it like you always do.
 Page layout controls the level they are on like usual.

Select the image and go to the HTML tab in "Insert Object HTML" select "Inside DIV"
and paste this class, then OK to save.


That's it. Preview your page and you'll see it work 

Look in the HEAD I put a note where you can change how much it moves up
look for the [+] you'll see a -25. That means it moves up negative 25 pixels.
Play around with that number until you get the distance you want.

Change the distance it moves

The opacity (fade out)

In two places the HEAD you'll see opacity: 0.5
If you make those opacity: 0.8 for example they will be less faded out
If you make them opacity: 1 they won't be faded at all

Web Studio Next

Every little bit helps to keep this site up and running, thank-you.


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