Lúc buồn tay tôi viết một đoạn CSS3 cho vui:

<style>
#thao {margin:auto; width:400px; height:270px; border:1px solid #ccc; position: relative;overflow:hidden;  }
#thao .layer1 {width:200px;height:50px;float:left; display:block; background:#E8F2FF;margin:2px;}
#thao .layer1:hover  { background:#D0E2EE;}
#thao .layer1 .layer2  {width:100px;height:1px;position: absolute; background:#E8F2FF;right:400px;top:0px; opacity:0;transition: all 2s ease-in-out 0s; -webkit-transition:all 2s ease-in-out 0s;}
#thao .layer1:hover .layer2 {width:200px;height:270px; background:#A3BCE3; display:block; right:0px;top:0px;  transition: all 2s ease-in-out 0s;-webkit-transition:all 2s ease-in-out 0s;    opacity:1;  }
</style>

<div id="thao">
  <div class="layer1">1... <div class="layer2">1.2...</div></div>
  <div class="layer1">2... <div class="layer2">2.2...</div></div>
  <div class="layer1">3... <div class="layer2">3.2...</div></div>
  <div class="layer1">4... <div class="layer2">4.2...</div></div>
  <div class="layer1">5... <div class="layer2">5.2...</div></div>
</div>

1...

1.2...

2...

2.2...

3...

3.2...

4...

4.2...

5...

5.2...