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

Hôm nay Namkna sẽ hướng dẫn các bạn cách để thêm một hiệu ứng dê chuột tuyệt vời cho hình ảnh Blogger chỉ sử dụng CSS, Với cách này chỉ cần di chuyển chuột qua một hình ảnh từ các hướng khác nhau (từ trên xuống, từ dưới lên, vv) sẽ gây ra một lớp phủ từ các hướng mà bạn di chuột tới. Thủ thuật này sẽ thay đổi không chỉ những hình ảnh xuất hiện khi di chuyển chuột lên chúng, mà cũng cho phép bạn thêm bên trong một văn bản với một mô tả.

Các bạn có thể xem demo ở hình ảnh bên dưới bằng cách di chuột lên hình ảnh từ nhiều vị trí khác nhau nha.

VIEW DEMO

» Thêm hiệu ứng hover ảnh sử dụng CSS cho blogspot

1. Đăng nhập vào blog.
2. Vào mẫu (Template) => Chọn chỉnh sửa HTML (Edit HTML).
3. Dán đoạn code bên dưới vào trước thẻ ]]></b:skin>

/* 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;}

4. Lưu mẫu lại và tiến hành bước tiếp theo.

5. Bạn chọn Viết bài mới và chọn tab HTML. Bây giờ để thêm hiệu ứng vào hình ảnh thì bạn sử dụng cấu trúc như bên dưới.

<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/AVvXsEjVha4sk4Wrrx7RbMV0DKnt7O-SJpd6C39iT_jnaCJWYFptqAY5sQROv-Fpu67PuwVzqYadgkS5FzxZkeLDSRpREWyZH4TuyOsX2YwROs68u1Zqaw1n_RYzJl8_J-_07RsH_6sZ-kbpi09m/s1600/hoat+hinh+dep+tao+nen+hover.jpg">
</div>

Hãy chỉnh sửa các đoạn văn bản in đậm mô tả theo ý thích của bạn nha.

6. Bấm xuất bản và xem thành quả của bạn nha.

Lưu ý quan trọng. Do thủ thuật này có sử dụng thẻ span nên bạn không được bấm trở lại tab viết nếu không các cài đặt cảu bạn sẽ bị mất.

helplogger