hover + positon

• 讓圖片或是區塊移動

.article-content img:first-child{ 
position: absolute;  
top: 0px;
left: 0px;
}
.article:hover .article-content img:first-child{
right: 0px;  
left: auto;
}

• 也可以定義當滑鼠經過時，圖片位移幾個像素，例如 left: 50px; 就是往右位移50像素，如果覺得板面太雜亂大多是因為側欄的關係，可以減少側欄元件，讓版面乾淨一點，但有些部落格需要的元件較多無法刪減，而伸縮側欄就是一個很好用的設計。

links{
position: absolute;  
top: 0px;
right: -250px;  
-webkit-transition: right 0.5s ease-out;  
-moz-transition: right 0.5s ease-out;  
-o-transition: right 0.5s ease-out;
transition: right 0.5s ease-out;
}
#links:hover{
right: 0px;  
}
body{
overflow-x: hidden;

側欄有分側欄1(#links-row-1)與側欄2(#links-row-2)，若只想將其中一個側欄變成伸縮側欄，可將以上語法#links 改成 #links-row-1 或 #links-row-2 就可以了。另外要注意到這邊有選單的話，建議在側欄多出的那一小角設一個背景圖上面有提示文字。

下一篇我將介紹互動式CSS按鈕動畫的應用ㄛ!