Coding Architecture

前から、気になっていたので、試してみました。

demo

参考サイトは、Create Resizing Thumbnails Using Overflow Property | Css Globe

<ul id="globalNavigationA01" class="clearfix">
<li><a href="#"><img src="img/img02.gif" alt="" /></a></li>
<li><a href="#"><img src="img/img02.gif" alt="" /></a></li>
<li><a href="#"><img src="img/img02.gif" alt="" /></a></li>
</ul>

<ul id="globalNavigationA02" class="clearfix">
<li><a href="#"><img src="img/img02.gif" alt="" /></a></li>
<li><a href="#"><img src="img/img02.gif" alt="" /></a></li>
<li><a href="#"><img src="img/img02.gif" alt="" /></a></li>
</ul>

ul#globalNavigationA01,
ul#globalNavigationA02{
clear:both;
margin-bottom:60px;
}

ul#globalNavigationA01 li,
ul#globalNavigationA02 li{
float:left;
margin-right:5px;

}

ul#globalNavigationA01 a,
ul#globalNavigationA02 a{
display:block;
width:50px;
height:50px;
overflow:hidden;
position:relative;
z-index:1;
border:1px solid #333;
}

ul#globalNavigationA01 a img{
position:absolute;
top:-25px;
left:-25px;	

}

ul#globalNavigationA02 a img{
position:absolute;
top:-1px;
left:-1px;	

}

ul#globalNavigationA01 a:hover,
ul#globalNavigationA02 a:hover{
overflow:visible;
z-index:1000;
}

ul#globalNavigationA01 a:hover img,
ul#globalNavigationA02 a:hover img{
background:#fff;	
border:1px solid #000;	
}