<body>
<style>
/* list item styles*/
ul {width:500px;list-style-type:none;}
ul li{float:left;margin-left:14px;height:86px;width:86px;}
/* links */
ul li a {display:block;width:84px;height:84px;border:1px solid #0033CC;color:#000;text-decoration:none;}
ul li a img {width:84px;height:84px;display:block;position:relative;border:none;}
/* hover state */
ul li a:hover {border:2px solid #cc0000;width:82px;height:82px;position:relative;overflow:hidden;}
ul li a:hover img {position:absolute;left:-1px;top:-1px;}
</style>
<!-- html -->
<ul id="my-list-items">
<li>
<a title="my-page.html" href="my-page.html">
<img src="test.jpg"/>
</a>
</li>
<li>
<a title="my-page-2.html" href="my-page-2.html">
<img src="test.jpg"/>
</a>
</li>
</ul>
</body>