Image effects in Web Studio
Web Studio 5 Tutorials and Add On's - supporting you take your website that next step

The Image Effects Category

 Remember to donate if you use a tutorial - Thank-you for help with maintaining the website and for understanding my time

Add ons and tutorials for images using Web Studio 5

Images can be the main reason a website can be slow to load.
When you use large images optimize them for download you can read more about image use in the CSS section
I try to optimize my image download size to under 40KB for lower band internet connections

• Image effects links with descriptions, (this page).

• These use the built in title so all you do is add a class and they generate the effect
• The image slides over to reveal text below, options to slide right, left, up or down

• These use an HTML object, you code the text below so you can do more with them
• The image slides over to reveal text below, options to slide right, left, up or down

• When you hover the image some caption text slides over the image
• Options slide up or fade in customize the colors, transparency, height or speed

• The image changes to another image when you hover
• You use protected graphics, and the same size pictures

• The image changes to another image that fades in when you hover
• Looks best if the images are the same size and the lower picture can be linked

• This will fix a set of images and text you group while the page scrolls
• The selected group will center on the page

• This fixes an image in place while the rest of the page scrolls
• I'll be moving this to it's own page in the update

• A single fixed page experiment I did to see if it could be done in web studio
• Uses a slideshow and a button that changes text to more info that bounces in

• An option to animate a background image
• This one uses a image of clouds and is more experimental but it can be done

• This is an example of using an animate background with a fixed image
• I use a star animated background instead of clouds for this example

• Linked button images that slide up and fade in
• You can change how far the images move and their transparency

• When you scroll down a page an image will stick to the top as you scroll farther
• In web studio it gets tricky to do this with multiple images so it's just for one image

• This at the moment is a lot of hover effects rolled into one
• When I update this I'll seperate all these into individual tutorials

• Description of future link

• Description of future link

• Description of future link

• Description of future link

• A more in depth look at floating an image inside text that wraps around it
• A simplified version can be found in the CSS section - paragraph & text

• Click on a thumbnail image and it'll show a larger image
• This is for a group of small pictures that open the larger image at one location

• Change a set of grouped images from a drop down list
• You can customize the drop down colors for most browsers

• Description of future link

• Description of future link

• Description of future link

Other Image links on Web Studio Next

Where to find other image effects

• Making images slideshows in Web Studio from easy to advanced
• Most of these were written so they'll make themselves with as little effort as possible

• "Lightbox" type effects for images that pop up and darken the background
• This is where you'll find the thumbnail converter that will convert the built in

• Making images go to the width of the computer screen for banners
• Also screen wide slideshows specifically written with fast loading code for banners

• Making images fit the entire computer screen
• Some css tutorials some add ons and even slideshows or a dedicated image gallery

• You'll find a lot of things can be done with images using CSS
• With the newer version CSS3 even some of the jQuery effects can be accomplished


Web Studio Next - Image effects - For use in Web Studio 5