Hiệu ứng mở rộng thêm hình ảnh khi rê chuột vào

Ở bài viết trước tôi đã giới thiệu với các bạn về thủ thuật hiển thị chú thích hình ảnh khi rê chuột vào còn với bài viết này tôi  chia sẻ với bạn cách làm hiệu ứng mở rộng thêm hình ảnh  khi rê chuột vào. Với việc sử dụng hiệu ứng này bạn sẽ làm cho Blogspot, Website của bạn thêm sinh động mà không lo nặng site vì hoàn toàn sử dụng ngôn ngữ CSS

Demo: Tại đây

Cách làm trên Blogspot như sau:
1. Vào bảng điều khiển Blogger -> bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/JavaSript
2. Dán code dưới đây vào tiện ích vừa thêm

<style>

#btrix_imgstack{

width:300px;margin:0 auto;margin-top:2%;

}


#btrix_imgstack a{

width:288px;

height:200px;

position:absolute;

display:block;

border:6px solid #f0f0f0;

border-radius:2px;

box-shadow:0 0 10px rgba(0,0,0,.3);

transition:margin .5s;

-webkit-transition:margin .5s;

}



#btrix_imgstack img{

width:288px;

max-height:100%;

}



#btrix_imgstack a:first-of-type{

margin-top:-5px;

margin-left:-20px;

transform:rotate(-3deg);

-webkit-transform:rotate(-3deg);

}



#btrix_imgstack a:nth-of-type(2){

margin-top:-5px;

margin-left:-10px;

z-index:-1;}



#btrix_imgstack a:last-of-type{

transform:rotate(3deg);

-webkit-transform:rotate(3deg);

z-index:-2;}



#btrix_imgstack:hover a:first-of-type{

margin-left:-310px;

margin-top:5px;}



#btrix_imgstack:hover a:nth-of-type(2){

margin-top:-5px;}



#btrix_imgstack:hover a:last-of-type{

margin-left:290px;

margin-top:5px;}



#btrix_imgstack a:first-of-type:hover,#btrix_imgstack a:last-of-type:hover{margin-top:-5px;}

#btrix_imgstack a:nth-of-type(2):hover{margin-top:-10px;}

</style>

<div id="btrix_imgstack">



<a href="http://goctraitim360.blogspot.com/">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHaCO0tD4d-CrTPZ578tiAhNyHpQmQ0myJIZYqiTRnoFWiRS1phdFib5HVRO7Fxo-Zbybm0UZF-MvytJcklpM-rtusqP6pLemN1GtFNbF5WxcIMor8KbFYcm2Eaae_HK69rDxniCCVjZY/s1600/btrix_image1.jpg" alt />

</a>

<a href="http://anhdep3.blogspot.com/">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE23swv0gaycCsgBFGDcaDQ2bKiva9M-YscnFSKQxwtsheJy9huDOuzBbZ1KIRKqeHeuRAW_3ST74FB0pelrL-ipqz7GFu4ZlfDU6kwcJzyf5gBEgbjEPJtX2qqh6qHI-Nf8YB8dbXlWg/s1600/btrix_image2.jpg" alt />

</a>

<a href="http://www.itviet360.com/p/dich-vu-seo-web-gia-re-giai-phap-tot.html">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkRqgucBL-vz7pYTRIVmE-QDEKl5ZLBOlM5ea6fp8npeH7FSbr_y2k8o87TK8ny6x9vulpvfjjiiArnoIV-_ew1JUMRa7nplWi_ksIQNs9VRJjTuiTExDYX72KcPStzeicB1f7Qpn_NvU/s1600/btrix_image3.jpg" alt />

</a>

</div>
Trong đó:
- Những dòng bôi xanh là những link hình ảnh của bạn.