<style>#celiabox {
width:420px;position:absolute;height: 240px;border: 2px solid #888;}
#text{font-size:12px; font-family: trebuchet ms;text-align:center;width:180px;height:230px;padding:2px;overflow:none;color:#666666;}#picture{width:220px;height:220px;-webkit-transition: opacity 0.9s linear;-webkit-transition: all 0.9s ease-in-out;-moz-transition: all 0.9s ease-in-out;-o-transition: all 0.9s ease-in-out;}
#side:hover #picture {margin-left:-170px;font-size:12px;}
</style>
<div id="celiabox">

<table id="side" border="0" cellpadding="0" cellspacing="0" ><tr>
<td><div id="text">Hello, It's me.<br />Testing Testing<br />写字在这里</div>
</td>
<td><div id="picture"><img src="http://i1259.photobucket.com/albums/ii546/Cecelia2620/celiaprouct222.jpg" height="220px;" /></div></td>
</tr></table></div>

解释

绿色字眼 : 图片的link (p.s. 大小最好是 1:1，意思说，宽和长最好是一样的)

橘色字眼 : 框框类型，颜色，厚度那些

紫色字眼 : 字显示的字体 (eg: comic sans, arial .....)
红色字眼 : 写字的地方，或者你想要加代码也可以 :)

<style>#celiabox {
width:420px;position:absolute;height: 240px;border: 2px solid #888;}
#text{font-size:12px; font-family: trebuchet ms;text-align:center;width:180px;height:230px;padding:2px;overflow:none;color:#666666;}#picture{width:220px;height:220px;-webkit-transition: opacity 0.9s linear;-webkit-transition: all 0.9s ease-in-out;-moz-transition: all 0.9s ease-in-out;-o-transition: all 0.9s ease-in-out;}
#side:hover #picture {margin-left:-170px;font-size:12px;}
</style>
<div id="celiabox">

<table id="side" border="0" cellpadding="0" cellspacing="0" ><tr>
<td><div id="text">Hello, It's me.<br />Testing Testing<br />写字在这里</div>
</td>
<td><div id="picture"><img src="http://i1259.photobucket.com/albums/ii546/Cecelia2620/celiaprouct222.jpg" height="220px;" /></div></td>
</tr></table></div>

解释

绿色字眼 : 图片的link (p.s. 大小最好是 1:1，意思说，宽和长最好是一样的)

橘色字眼 : 框框类型，颜色，厚度那些

紫色字眼 : 字显示的字体 (eg: comic sans, arial .....)
红色字眼 : 写字的地方，或者你想要加代码也可以 :)