Tuy sử dụng hoàn toàn là css nhưng hình ảnh di chuyển rất mượt mà uyển chuyển.
Có thể điều chỉnh theo các khung hình có kích thước khác nhau.Và khả năng tùy biến là rất cao.
Xem thử:
DEMO
làm thế nào để áp dụng vào blogspot
Code gồm 2 phần là css và HTML ta có thể bỏ CSS vào trong mẫu khi sử dụng thì ta chỉ việc dùng phần HTML hoặc ta gộp cả css và HTML trong 1 code như bên dưới:<style type="text/css>
#dtb{width:750px; height:320px; border:0px solid #333; float:left;overflow:hidden;}
.ngang, .doc {float:left; margin:5px; padding:5px; border:1px solid #aaa;display: block;overflow:hidden;box-align:center;text-align:center; min-width:74px; min-height:138px; position: relative;
display: table-cell;vertical-align: middle;
}
/*ngang*/
.ngang .trai {float: left;position: absolute;transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s; -o-transition-duration: 1s;
}
.ngang .phai { float: right;width: ;transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s; -o-transition-duration: 1s;}
.ngang:hover .trai {margin-left: 128px;}
.ngang:hover .phai {margin-right: 128px;}
/*doc*/
.doc .tren {position: absolute;transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s; -o-transition-duration: 1s;top:0px}
.doc .duoi {position: absolute;transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s; -o-transition-duration: 1s;bottom:0px
}
.doc:hover .tren {margin-top: 69px;}
.doc:hover .duoi {margin-bottom: 69px;}
</style>
<div id="dtb">
<div class="ngang" style="width:256px; ">
<div class="trai">
<img alt="demo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlndEizVtFlIjS7i_dufnf-MFlBeo_bNGMcWd-g_VuVHNMyW_17A5WdfZWDhZHyKRC-xZXeFOiHhb75pPFNmdRBgFCd2vAdnyqH-dZeSuOQkd5mbbZErUHGQuq1gAYPi4MEGl3jXW7czE/s1600/home-icon.png"/></div>
<div class="phai">
<img alt="demo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_f1iETxlua6EibK63-cfIAN5-45NlkHxOX5cRLsCy3lZrX7mxb91kHhpDPHWoe0kEQVTcdMuGwkKBM-RHwi_Mgm9KNFTN5PL338VLJJIbZ-6V_h3MJ-QxtV9b362BkRL7i12IF-Amj48/s1600/House-icon.png"/></div>
</div>
<div class="doc" style="width:; height:128px;">
<div class="tren">
<img alt="demo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4x_pEbdJm7KxNQrO6O9CeHR-C6u4q_jWZTyYc0rAWa1-iK5gqe03vWKJxi4mQuXeQgRzDhRaWS1GqZggR1UERQsTSP9CPwwo1eE0Vyqb6tYfZ0RMcbr4pBVvP2f359nohTPBpzlwUQGY/s1600/dog-icon.png"/></div>
<div class="duoi">
<img alt="demo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8HkDcpHBKwj-jZVSGSwO8hfpizrRr1UL0CSiAmq8WmVV2WzIr91JfWbbIrOJvv0RMbM9tXfV-8TvUspyJqPBHYBM1dE2hNN1MS3QzpINoMaJirbSYdN_bFjahU4XuvNdy2c0qjIHHMLk/s1600/santa-dog-icon.png"/></div>
</div>
<div class="doc" style="width:; height:128px;">
<div class="tren">
<img alt="demo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim-XZJjdfkmkrwzf92qMYiRfsed81kYleFpmSvSMlguT6M9rXoEuz7Olr8NHJTLcGbYfWB-whRkoySjMdnq5u13Voy-x4liF1XhAiz5zsHsp3Tb0t9pi8dtXiiw23NBuzn_UzE-oHhDKc/s1600/home-icon.png"/></div>
<div class="duoi">
<img alt="demo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXMJSyMRpUSDD_U52JzFQDpP9GvESURLkRWzl4Hwtxqs81pvLqRlNOG7p7B7cN1ZIExUeyXbgazPili5lbFY8XvYAehT8vqpzST90aRQlBozEPB7vqU3frO6Ahd7EQEqxTH1eZJB4BRDM/s1600/House-icon.png"/></div>
</div>
<div class="ngang" style="width:256px; height:;">
<div class="trai">
<img alt="demo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGG_kqjIFKzZWQENOQFGhgxr-FWIWfDfv720xCBKbzV1iN0Cinnqf5vFV72HWAAJv82yX7MdBaMy6dzm65_nZmWGBeMK5jN3vP5hvHzfNaEcC1AGGdj05s-Ai3fa3Hwu_-Mfp3HBXwfz0/s1600/dog-icon.png"/></div>
<div class="phai">
<img alt="demo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT9pKjRxmtsWCLcVdKtwhMf-QRD3oGWyT8IRYMG64sggaaFgn-7zyE4CGSdRBCxOdaWzMfo_r1XU_MJYxPe1-FhkjtmozWCtrXO3XOYEtYTwGMcjh3wTn8YrD8RkMUBfeRXHQm8QmOs5g/s1600/santa-dog-icon.png"/></div>
</div>
<div class="ngang" style="width:256px; height:;">
<div class="trai">
<img alt="demo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGG_kqjIFKzZWQENOQFGhgxr-FWIWfDfv720xCBKbzV1iN0Cinnqf5vFV72HWAAJv82yX7MdBaMy6dzm65_nZmWGBeMK5jN3vP5hvHzfNaEcC1AGGdj05s-Ai3fa3Hwu_-Mfp3HBXwfz0/s1600/dog-icon.png"/></div>
<div class="phai">
<img alt="demo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT9pKjRxmtsWCLcVdKtwhMf-QRD3oGWyT8IRYMG64sggaaFgn-7zyE4CGSdRBCxOdaWzMfo_r1XU_MJYxPe1-FhkjtmozWCtrXO3XOYEtYTwGMcjh3wTn8YrD8RkMUBfeRXHQm8QmOs5g/s1600/santa-dog-icon.png"/></div>
</div>
<div class="doc" style="width:; height:;">
<div class="tren">
<img alt="demo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim-XZJjdfkmkrwzf92qMYiRfsed81kYleFpmSvSMlguT6M9rXoEuz7Olr8NHJTLcGbYfWB-whRkoySjMdnq5u13Voy-x4liF1XhAiz5zsHsp3Tb0t9pi8dtXiiw23NBuzn_UzE-oHhDKc/s1600/home-icon.png"/></div>
<div class="duoi">
<img alt="demo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXMJSyMRpUSDD_U52JzFQDpP9GvESURLkRWzl4Hwtxqs81pvLqRlNOG7p7B7cN1ZIExUeyXbgazPili5lbFY8XvYAehT8vqpzST90aRQlBozEPB7vqU3frO6Ahd7EQEqxTH1eZJB4BRDM/s1600/House-icon.png"/></div>
</div>
<div class="ngang" style="width:256px; height:;">
<div class="trai">
<img alt="demo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlndEizVtFlIjS7i_dufnf-MFlBeo_bNGMcWd-g_VuVHNMyW_17A5WdfZWDhZHyKRC-xZXeFOiHhb75pPFNmdRBgFCd2vAdnyqH-dZeSuOQkd5mbbZErUHGQuq1gAYPi4MEGl3jXW7czE/s1600/home-icon.png"/></div>
<div class="phai">
<img alt="demo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_f1iETxlua6EibK63-cfIAN5-45NlkHxOX5cRLsCy3lZrX7mxb91kHhpDPHWoe0kEQVTcdMuGwkKBM-RHwi_Mgm9KNFTN5PL338VLJJIbZ-6V_h3MJ-QxtV9b362BkRL7i12IF-Amj48/s1600/House-icon.png"/></div>
</div>
<div class="doc" style="width:; height:;">
<div class="tren">
<img alt="demo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim-XZJjdfkmkrwzf92qMYiRfsed81kYleFpmSvSMlguT6M9rXoEuz7Olr8NHJTLcGbYfWB-whRkoySjMdnq5u13Voy-x4liF1XhAiz5zsHsp3Tb0t9pi8dtXiiw23NBuzn_UzE-oHhDKc/s1600/home-icon.png"/></div>
<div class="duoi">
<img alt="demo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXMJSyMRpUSDD_U52JzFQDpP9GvESURLkRWzl4Hwtxqs81pvLqRlNOG7p7B7cN1ZIExUeyXbgazPili5lbFY8XvYAehT8vqpzST90aRQlBozEPB7vqU3frO6Ahd7EQEqxTH1eZJB4BRDM/s1600/House-icon.png" /></div>
</div>
</div>
Để có được một giao diện vừa ý ta cần hiệu chỉnh các thông số chiều rộng chiều cao cánh trái canh phải.
