Hiệu ứng hình ảnh di chuột từ các hướng

Dưới đây sẽ trình bầy cách tạo hiệu ứng cho hình ảnh khi di chuột từ các hướng khác nhau.Khi di chuột từ 4 hướng khác nhau sẽ có một lớp phủ với màu sắc thay đổi theo chiều di chuột.

Hiệu ứng này sử dụng hoàn toàn là CSS nên không ảnh hưởng nhiều tới tốc độ load trang của blog.
XEM THỬ

DEMO

Làm thế nào để áp dụng vào blogger

Điều đầu tiên cần làm là thêm CSS vào trong mẫu
Bước 1
Từ bảng điều khiển vào Template và nhấn Edit HTML
Tìm tới thẻ: </head> và dán đoạn CSS dưới đây vào trước nó

<style>
/* 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 */
div.multi-hover span:nth-child(1) { /* right */
background: none repeat scroll 0 0 rgba(255, 189, 36, 0.6);
left: 90%;
top: 0;
}
div.multi-hover span:nth-child(2) { /* top */
background: none repeat scroll 0 0 rgba(106, 170, 255, 0.6);
left: 0;
top: -80%;
}
div.multi-hover span:nth-child(3) { /* left */
background: none repeat scroll 0 0 rgba(204, 87, 166, 0.6);
left: -90%;
top: 0;
}
div.multi-hover span:nth-child(4) { /* bottom */
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;}
</style>

Bước 2
Chọn đăng 1 bài mới(bên soạn thảo HTML) hay thêm 1 tiện ích là tùy yêu cầu cần sử dụng và dán code sau vào

<div class="multi-hover">
<span>Từ phải</span>
<span>Từ trên</span>
<span>Từ trái</span>
<span>Từ dưới</span>
<img src="http://2.bp.blogspot.com/-lHTYYmlGyT4/UjQbnitX7II/AAAAAAAAAZo/_uOxtzm2peM/s1600/hoa-anh-tuc-14.jpg" ></div>

Lưu ý
Trong phần đăng bài mới chỉ thực hiện bên soạn thảo HTML xong việc thì click Xuất Bản không được chuyển sang chế độ Viết sẽ làm mất 4 dòng thẻ Span hiệu ứng cũng mất luôn.
(http://2.bp.blogspot.com/-lHTYYmlGyT4/UjQbnitX7II/AAAAAAAAAZo/_uOxtzm2peM/s1600/hoa-anh-tuc-14.jpg) chính là link ảnh cần tạo hiệu ứng.
Nếu bạn muốn khi di chuột không có dòng chữ Từ phải... thì bỏ đi những chữ đó còn 4 thẻ SPAN vẫn phải giữ nguyên.Nó sẽ còn lại như sau

<div class="multi-hover">
<span></span>
<span></span>
<span></span>
<span></span>
<img src="http://2.bp.blogspot.com/-lHTYYmlGyT4/UjQbnitX7II/AAAAAAAAAZo/_uOxtzm2peM/s1600/hoa-anh-tuc-14.jpg" ></div>

Chúc thành công!