Now in webstudio, drag on an HTML object attach the above image (or use one of your own).
<img src="$thisfolderurl$ridge.gif" style="width:100px; border:2px solid black;" onmouseover="this.style.width='400px'" onmouseout="this.style.width='100px'" alt="" title="" />
Now when you mouse over the picture it'll be larger, then go back when you take your mouse off.
What's happening there?
You see the width:100px that's telling the browser to put the image on the screen at 100 pixels wide,
then I put a border around the image 'cause I like that look you can just delete that if you want to? border:2px solid black;
You can change those if you want to but the 100 / 100 have to be the same, the 400 can be any size you want (within reason of course) ;)
It's a neat little trick.
I'd suggest using a placeholder graphic for the HTML object, that way it'll look like the picture on your page while you working on it.