Thay hiệu ứng hover ảnh sử dụng CSS cho blogger

Loading...

Một hiệu ứng hình ảnh khá hay cho bài viết hoặc Widget blogspot, Website nếu chúng ta chỉ cần chăm chút 1 đoạn mã code CSS. Đó là hiệu ứng hover ảnh sử dụng CSS cho blogger, hiệu ứng giúp thay mờ ảnh khi có chuột rê vào

Demo: http://itviet360-demo.blogspot.com/2013/11/demo-hieu-ung-hover-anh-su-dung-css-cho.html

Với thủ thuật này hình ảnh của bạn sẽ có hiệu ứng khi rê phải, trái, trên dưới.
Các bước làm thủ thuật:
1. Vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
2. Tìm tới ]]></b:skin> và dán code dưới đây ngay trên nó

/* The container and the image */
div.multi-hover {
overflow: hidden;
position: relative;
vertical-align: middle;
width: 100%;
height: 358px;
line-height: 358px;
}
div.multi-hover img {width: 100%;}

/* The texts that, by default, are hidden */
div.multi-hover span {
color: #FFF;
font-size: 32px;
font-weight: bold;
height: 100%;
opacity: 0;
position: absolute;
text-align: center;
transition: all 0.3s linear 0s;
width: 100%;
}

/* And this is what will generate the effect */
/* right */
div.multi-hover span:nth-child(1) {
background: none repeat scroll 0 0 rgba(255, 189, 36, 0.6);
left: 90%;
top: 0;
}
/* top */
div.multi-hover span:nth-child(2) {
background: none repeat scroll 0 0 rgba(106, 170, 255, 0.6);
left: 0;
top: -80%;
}
/* left */
div.multi-hover span:nth-child(3) {
background: none repeat scroll 0 0 rgba(204, 87, 166, 0.6);
left: -90%;
top: 0;
}
/* bottom */
div.multi-hover span:nth-child(4) {
background: none repeat scroll 0 0 rgba(97, 181, 115, 0.6);
left: 0;
top: 80%;
}

div.multi-hover span:hover {opacity: 1;}
div.multi-hover span:nth-child(2n+1):hover {left: 0;}
div.multi-hover span:nth-child(2n):hover {top: 0;}

3. Lưu mẫu lại
4. Khi đăng bài viết hoặc thêm tiện ích HTML mới mà bạn muốn dùng hiệu ứng này thì bạn sử dụng code sau
- Đối với bài đăng thì bạn chọn Tab HTML khi đăng bài mới nhé

<div class=multi-hover>
<span>hover right</span>
<span>hover top</span>
<span>hover left</span>
<span>hover bottom</span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk96gZifth9TiD0r9-0Aom4HOZbTzGFoxUqxp9KFS1F3gQ_6sArrT8weLztZKduGUO2pY_luX5YN1S38TyeZWanTh18HqMDGwaIx4CX9ENVTLyYJBmHckviFNw1rtJbEpL_6eipytJmb4X/s1600/hoat+hinh+dep+tao+nen+hover.jpg">
</div>

Chúc các bạn vui vẻ !

Loading...

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