I'm trying use jquery ui to scale a div that I'm dragging around to make it easier to see what's behind it, but any text inside it is scaling strangely. The text itself becomes smaller, but it seems to have a bunch of padding around it and is floating now. The text extends past the bottom of the div even though it should be contained properly by the div. I put a red border around the lines of text and the borders are the same size as the original text. I'm not really sure what to do to get this to work...

HTML:

<div class="item draggable" id="item-1'">
    <div class="image-block">
        <a class="delete-button" title="delete me!" href="/remove/1" onclick="return $(this).confirm(\'Really remove this image?\');">X</a>
        <a class="image" href="/edit/1"><img src="/someimage.jpg" /></a>
        <div class="clear-block"></div>
    </div>
    <h3>Some title</h3>
</div>

CSS:

 div.image-list div.item {
	float:left;
	background:#fff;
	width:150px;
	padding:5px;
	margin:4px;
	border:1px solid #d3d5d6;
	}
 div.image-list div.item h3 {
	margin:0;
	padding:0;
	border:solid 1px #F00;
	}
 div.image-list div.item div.image-block a.delete-button {
	float:right;
	position:relative;
	background:#fff;
	display:none;
	top:0.8em;
	margin-bottom:-20.0em;
	width:3em;
	height:1.8em;
	padding:0.2em 1em;
	}
 div.image-list div.item div.image-block a.image {
	float:left;
	display:block;
	}
.clear-block {
	clear:both;	
}

jquery:

$(".draggable").draggable({
	helper: 'clone',
	start: function(ev, ui) {
		$(ui.helper).effect( "scale", { percent: 50 }, 200 );
	}
});