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

Loading...

Ở bài viết trước mình đã 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 hôm nay, itviet360 chia sẻ với bạn cách làm hiệu ứng mở rộng thêm hình ảnh tách 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 CSS

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj03WO_Sfx3CME-hDQ8TPEhdu8QQsiG3MCRhVKAAC7j858q5C1VG32Q6vFj0M6CzGLpKhgo_gY9ca8kq_PUw4oH6driVoAvENQ0uyFJQB54lv9foAC9FLEZPlcPRQDYMkfkCIs82AuxkJk/s1600/btrix_image1.jpg" alt />

</a>

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

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicHi1oxDLDBRm3Vla3lWCJKkDOoKN6EyczD3_DWmhp17LfHe381iGY5D28JEkqR1-M8R9C9f5dAfs3E5zc6b_oEjXJZ66diLCRxsUnPlI0Eopazx-N4MviPBlmhN7ARGg6qRLKALvLDKM/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/AVvXsEijICdkYoQSWsTlkdJUdO4vjCSiQfoUxEeIUG_ASPCW7nV9wE-HeYpxJN08HL49pEPF1EYq108XvO5UQB0poMr7TphQxLkrQRCG0jJe01wBgE72GbCOcWqPqtJdIcPxqZpZXfWdPI-S1X0/s1600/btrix_image3.jpg" alt />

</a>

</div>

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

Loading...

Chuyên mục: Thu thuat, Thu thuat blogspot, thu-thuat, thu-thuat-blogger