Trượt Ảnh Ngang Dọc Với CSS3 ....

Đây là hiệu ứng trượt ảnh theo chiều ngang và chiều dọc khi ta rê chuột vào ảnh thường thấy ở các web/blog có giao diện mang phong cách metro.
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.

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/AVvXsEg0RZbMLHco0PzIUQegeS60xlC4s2Xc_B2Zmvu8oZBrjqDwTWfu5gXS4HZxkLQMwg-Yx1kXKWsPz1xkXhNFJemy1Fuy3Dz-sAS_VABhKUAr87hDe4crNNj7Dicyi8Hsy8vHww7aZ7JTifs/s1600/home-icon.png"/></div>
<div class="phai">
<img alt="demo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLixC0Wl0iSCl0IUe6hRLoWeASMv5lzKcASWw3m1449H3LCHPq0CoJHxJzKU0k9h19brWQvhQkqVcdQVRakng4DeAebCDoouzmHf6rmOvvN8WGhBqAcw9C4bB14qAQ90OjZxZe2YmnlLs/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/AVvXsEhpjB3yZ09uK3KwLn2P5C4lt4BXuMSnPOTmADRTTBYGbSxQy3T9kcXLGyrpO4OYiM4zjQQP62smhWR81bgzgom9ZU1Mi3kvAg52Ysw5PXnWttt5ni1wfTjP-s1JN_Xk_W8j4IbpWIlpMB8/s1600/dog-icon.png"/></div>
<div class="duoi">
<img alt="demo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCc0sYb8fxHaCDZ4zYdMOVWAQoFZgHUZZakxOnhJe4RRZhqE3fKPjKJWtrkWmg1vorcB9unX4B89R8BN7AatwKNHT0B4hqwOGWGObHxw2k8SyqiAvNvYHmjYd3hNZyI-MsV0rTpCdAQj4/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/AVvXsEjAOh_SOx14xewXSIyznrRDIPILNSvVElPyOfb0zrJ98_XuvgJwRFAUTG8YIMbJK8kW6ugb9NcStJNFlmZKD4r2c4kCHUuoJXvb3N0tfZqisp41gBuoXGeBuL_tN7yjvl5fBMhzZ6vtCI0/s1600/home-icon.png"/></div>
<div class="duoi">
<img alt="demo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvwVZQXBTGwSDdC5EMfgi97SRNkRgln-k6SMbw7ksN6sxCGelShb5-zwmeY9o1blvu5QbIFxsGmg7Kb_yGXQuoT7W6OMvNNGU3VnYk5oIeAMd8cASngXLo1Y2QtlBo_t3adrUg9Vw30xU/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/AVvXsEgk0GnVlOximtvalzi1fqHU-Ou6uu3xRXp1DMbgSDBZb-K2R48V8uFSPl_g_hlWVjRETZ3LAzYVfGWXbqQI6ZUJFTUHsLguuF7atDbLo2W9HJ5qYhcF2Ruu602rmVa-sHKvQesgWFkTkbk/s1600/dog-icon.png"/></div>
<div class="phai">
<img alt="demo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih3Au1dFxpmVKKvnRVzBZEoxbcBJVbqOAo84LRihKR2tVoXTTE1mwHSb4mpDcLSmPJyqFp4HZEFH3yNGUJiHPGCVFqdRd0yw2-oCj7YyZVs7yPP4IxjIodLAmUi5sJtqsibIviEzPtixU/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/AVvXsEgk0GnVlOximtvalzi1fqHU-Ou6uu3xRXp1DMbgSDBZb-K2R48V8uFSPl_g_hlWVjRETZ3LAzYVfGWXbqQI6ZUJFTUHsLguuF7atDbLo2W9HJ5qYhcF2Ruu602rmVa-sHKvQesgWFkTkbk/s1600/dog-icon.png"/></div>
<div class="phai">
<img alt="demo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih3Au1dFxpmVKKvnRVzBZEoxbcBJVbqOAo84LRihKR2tVoXTTE1mwHSb4mpDcLSmPJyqFp4HZEFH3yNGUJiHPGCVFqdRd0yw2-oCj7YyZVs7yPP4IxjIodLAmUi5sJtqsibIviEzPtixU/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/AVvXsEjAOh_SOx14xewXSIyznrRDIPILNSvVElPyOfb0zrJ98_XuvgJwRFAUTG8YIMbJK8kW6ugb9NcStJNFlmZKD4r2c4kCHUuoJXvb3N0tfZqisp41gBuoXGeBuL_tN7yjvl5fBMhzZ6vtCI0/s1600/home-icon.png"/></div>
<div class="duoi">
<img alt="demo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvwVZQXBTGwSDdC5EMfgi97SRNkRgln-k6SMbw7ksN6sxCGelShb5-zwmeY9o1blvu5QbIFxsGmg7Kb_yGXQuoT7W6OMvNNGU3VnYk5oIeAMd8cASngXLo1Y2QtlBo_t3adrUg9Vw30xU/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/AVvXsEg0RZbMLHco0PzIUQegeS60xlC4s2Xc_B2Zmvu8oZBrjqDwTWfu5gXS4HZxkLQMwg-Yx1kXKWsPz1xkXhNFJemy1Fuy3Dz-sAS_VABhKUAr87hDe4crNNj7Dicyi8Hsy8vHww7aZ7JTifs/s1600/home-icon.png"/></div>
<div class="phai">
<img alt="demo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLixC0Wl0iSCl0IUe6hRLoWeASMv5lzKcASWw3m1449H3LCHPq0CoJHxJzKU0k9h19brWQvhQkqVcdQVRakng4DeAebCDoouzmHf6rmOvvN8WGhBqAcw9C4bB14qAQ90OjZxZe2YmnlLs/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/AVvXsEjAOh_SOx14xewXSIyznrRDIPILNSvVElPyOfb0zrJ98_XuvgJwRFAUTG8YIMbJK8kW6ugb9NcStJNFlmZKD4r2c4kCHUuoJXvb3N0tfZqisp41gBuoXGeBuL_tN7yjvl5fBMhzZ6vtCI0/s1600/home-icon.png"/></div>
<div class="duoi">
<img alt="demo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvwVZQXBTGwSDdC5EMfgi97SRNkRgln-k6SMbw7ksN6sxCGelShb5-zwmeY9o1blvu5QbIFxsGmg7Kb_yGXQuoT7W6OMvNNGU3VnYk5oIeAMd8cASngXLo1Y2QtlBo_t3adrUg9Vw30xU/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.
Ta cũng có thể gắn link vào từng ảnh dẫn đến những đích cụ thể

Posted in: Thủ Thuật