Tách hình ảnh khi rê chuột vào

Làm thế nào để thêm được hiệu ứng tách hình ảnh khi rê chuột vào?
- Một kỹ thuật sử dụng CSS để làm được điều đó sẽ được thủ thuật Blogspot hướng dẫn ngay dưới đây mà bạn có thể thêm vào blogspt hoặc vào ngay Website của bạn. Show hình ảnh hoặc đặt banner quảng cáo có chứa link
Ảnh đẹp. Tách hình ảnh khi rê chuột vào
Demo: TẠI ĐÂY

Cách làm trên Blogspot
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="http://1.bp.blogspot.com/-QGXmU_vZcLw/UodXeQiAQZI/AAAAAAAAISM/g7bIszohkSw/s1600/btrix_image1.jpg" />

</a>

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

<img src="http://2.bp.blogspot.com/-fiipDQF9DQ8/UodXeTIb8vI/AAAAAAAAISI/n2G_uw2NKvA/s1600/btrix_image2.jpg" />

</a>

<a href="http://seophongvu.com">

<img src="http://2.bp.blogspot.com/-lf2EzJ_UHUA/UodXah-Z74I/AAAAAAAAISA/jjcN70BWR7I/s1600/btrix_image3.jpg" />

</a>

</div>

- Trong đó: 3 link bôi đậm là link hình ảnh.
Chúc các bạn vui vẻ !
Tách hình ảnh khi rê chuột vào

Tách hình ảnh khi rê chuột vào

Nếu bạn thấy hay thì hãy để khích lệ tinh thần chia sẻ của tác giả BV "Tách hình ảnh khi rê chuột vào"

No comments:

Copyright © 2014 Thanh niên Bình Định - Supported by: IT Việt