Đặt quảng cáo

Tạo hiệu ứng (hover) đẹp đơn giản cho thumbnail blogspot

Bài viết liên quan:

Làm đẹp Blog luôn là một tiêu chí hàng đầu với hầu hết tất cả các Blogger. Và hôm nay mình xin chia sẻ code Tạo hiệu ứng (hover) đẹp đơn giản cho thumbnail blogspot. Thì với hiệu ứng này khi chúng ta rê chuột vài thumbnail bài viết ngoài trang chủ sẽ có hiệu ứng luồng sáng lướt qua, các bạn có thể xem demo trên Blog mình luôn nhé!
Để thực hiên, rất đơn giản, các bạn chỉ cần copy đoạn code sau và dán lên trên thẻ đóng /b:skin
.block-image a{-webkit-transition:all .6s;-moz-transition:all .6s;-o-transition:all .6s;transition:all .6s}
.block-image a:before{background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.3) 100%);background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,.3) 100%);content:'';display:block;height:100%;left:-75%;position:absolute;top:0;transform:skewX(-25deg);width:50%;z-index:2}
.block-image a:hover:before{animation:shine 2.5s}
@keyframes shine {
100%{left:125%;left:125%}
}
Chú ý: nếu thuộc tính css các bạn đặt là block-image thì các bạn không cần phải sửa gì, còn nếu ví dụ đặt một cái tên khác như thumb-image chẳng hạn thì các bạn nên sửa lại tên thuộc tính cho đúng với tên thuộc tính blog các bạn nha.
Chúc các bạn thành công!

Phan Niệm

Không muốn hoặc không thích, không tồn tại hoặc không thể! Cám ơn các bạn đã ghé thăm, chúc các bạn có những phút giây thoải mái và bổ ích trên blog của mình! Thanks for... Xem thêm về tôi

  1. Replies
    1. Người là ai xin cho tôi mượn bờ vai...tựa đầu gục ngã vì mõi mệt quá...

      Delete
  2. Giờ Niệm kinh quá rồi, chỗ nào cũng thấy ảnh gái hở hang :v

    ReplyDelete
  3. Cái này mấy hôm trc định chôm của ô về nè, mà nhấn F12 cái thụt cmn zái nên đợi ông share, các blog dạo này chơi chắc vỡi toàn hù ma =))

    ReplyDelete
    Replies
    1. Gặp dân chuyên nghiệp thì F12 chả nghĩa lý gì với nó :v

      Delete
    2. Uh tôi có nhiều cách để chôm mà :> ý là người ta đã ko thích cho thì thôi bỏ đi cố làm gì =))

      Delete
    3. Gõ thẳng lên trình duyệt ấy :v k cần F12

      Delete
  4. Trên thẻ đóng gì a nói rõ hơn đi a

    ReplyDelete
    Replies
    1. ]]> Ghi tắt như ảnh là ra rồi cần gì rõ ông ><

      Delete
    2. Bài viết a bị lỗi để a sửa lại. ]]> mới đúng.

      Delete
    3. wtf vẫn bị lỗi là sao. ]]>

      Delete
    4. Anh nên mã hóa đoạn ]]></b:skin> trước khi đưa vào bài viết hoặc bình luận.

      Delete
    5. Lúc trước a ko bị, sau này phá riếc nó bị vậy :D

      Delete
  5. hello anh 👋 bữa giờ em bận quá nên ko có tương tác vs anh đc.

    ReplyDelete
    Replies
    1. Không sao em, ai cũng bận mà chứ có ai mà rãnh hoài đâu :)

      Delete
    2. tại vì gần tết rồi mà em là kỹ thuật bên siêu thị điện thoại nên em không có thời gian nhiều

      Delete
  6. Bác có biết code không bác :??

    ReplyDelete
    Replies
    1. đương nhiên là biết, ông hỏi ngộ thế ?

      Delete
  7. bạn ơi cho mình đặt lk với ><
    tên hiển thị Star Huy IT url http://www.kenhit.ga/

    ReplyDelete
    Replies
    1. ok em nhé, nhớ ghe thawmvaf click quảng cáo ủng hộ a nhé! @@

      Delete
  8. Niệm Style là một người đẹp trai đến khó tin, hát hay đến không ngờ, dễ thương đến thẫn thờ, văn hay, toán giỏi, hiền lành, chịu khó, chung thủy, ga-lăng, không lăng nhăng...nhưng chỉ có một nhược điểm nho nhỏ là 2p ra

    ReplyDelete
  9. bộ icon vltk =)) :)) :v :3 chất

    ReplyDelete
  10. Replies
    1. Biết chứ ông, lò game thế hệ đầu game nào cũng có dấu răng của tôi mừ. Về sau này nó ra gunny thì ko rõ lắm :)

      Delete
  11. Replies
    1. Từng cơn gió khẽ vỗ tình, chiếc lá lìa cành buông xuống lòng đường...:))

      Delete