Một số hiệu hứng khi rê chuột vào ảnh

Để blog của bạn trở nên nổi bật thì có rất nhiều cách, như tiện ích, phối màu sắc,.. Ở bài viết này mình sẽ chia sẻ với các bạn một số hiệu ứng khi rê chuột vào ảnh. Hy vọng với một số hiệu ứng này các bạn có thể áp dụng để blog trở nên đẹp hơn, độc hơn !
Một số hiệu hứng khi rê chuột vào ảnh
Lưu ý: Các bạn cần phải biết một chút về CSS để dễ dang chỉnh sửa

1. Hiệu ứng #1

Bước 1: Vào Mẫu > Chỉnh sửa HTML
Bước 2: Chèn đoạn CSS sau trên </b:skin> hoặc </style>:

li.surj {
  position: relative;
  width: 100%;
  text-align: center;
  list-style: none;
}
.tl-thumboverlay {
  position: relative;
}

.tl-thumboverlay a:before{
  background: rgba(0, 0, 0, 0.13);
  content: '';
  height: 0;
  width: 0;
  left: 0;
  top: 0;
  margin: auto;
  position: absolute;
  z-index: 1;
  transition: all 0.3s ease-out 0s;
}
.tl-thumboverlay a:after{
  background: rgba(0, 0, 0, 0.13);
  content: '';
  width: 0;
  height: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
  transition: all 0.3s ease-out 0s;
}

.tl-thumboverlay:hover a:before,
.tl-thumboverlay:hover a:after {
  z-index: 1;
  width: 100%;
  height: 100%;
  transition: all 0.4s ease-out 0s;
}

.tlrp-thumb.tl-thumboverlay img{
  margin-bottom: -3px;
}
Bước 3: Thêm thuộc tính theo css cho ảnh. Ví dụ:

<li class="surj">
    <div class="tlrp-thumb tl-thumboverlay">
      <a href="#" class="layer"><img class="layerimg toLoad" src="https://2.bp.blogspot.com/-LryASrfOhos/VrWWs0FKJtI/AAAAAAAAAKw/5LH7rIQRqCo/w370-h200-c/aroni-arsa-children-little.jpg"></a>
    </div>
</li>

2. Hiệu ứng #2

Bước 1: Vào Mẫu > Chỉnh sửa HTML
Bước 2: Chèn đoạn CSS sau trên </b:skin> hoặc </style>:

img:hover {
    filter: sepia(100%);
    -webkit-filter: sepia(100%);
    -moz-filter: sepia(100%);
    -o-filter: sepia(100%);
    -ms-filter: sepia(100%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
Lưu ý: Nếu blog đã có css img:hover thì nên xóa để có thể áp dụng thành công.

3. Hiệu ứng #3

Bước 1: Vào Mẫu > Chỉnh sửa HTML
Bước 2: Chèn đoạn CSS sau trên </b:skin> hoặc </style>:

img:hover {
    cursor: pointer;
    -webkit-transform: scale(1.1,1.1);
    -moz-transform: scale(1.1,1.1);
    -o-transform: scale(1.1,1.1);
    -ms-transform: scale(1.1,1.1);
    transform: scale(1.1,1.1);
    transition: 0.75s;
    -webkit-transition: 0.75s;
    -moz-transition: 0.75s;
    -o-transition: 0.75s;
}
Lưu ý: Nếu blog đã có css img:hover thì nên xóa để có thể áp dụng thành công.

4 comments

  1. mình chỉ muốn hiệu ứng này trên hình ảnh giới thiệu của các bài post thui thì sao bạn. ( không phải bên trong bài post )
    Ví dụ :
    http://www.game4csm.com/search/label/GAME-OFFLINE?&max-results=200

    ReplyDelete
    Replies
    1. Xác định class hình ảnh của post và thêm vào nhé.
      Ví dụ style 2 thì thêm như sau:
      .gal4:hover {
      filter:sepia(100%);
      -webkit-filter:sepia(100%);
      -moz-filter:sepia(100%);
      -o-filter:sepia(100%);
      -ms-filter:sepia(100%);
      -webkit-transition:all 1s ease;
      -moz-transition:all 1s ease;
      -o-transition:all 1s ease;
      -ms-transition:all 1s ease;
      transition:all 1s ease;
      }

      Delete
  2. làm thế này liệu có khiến cho web bị chậm ko

    ReplyDelete

:v
;3
:)
:D
:P
:*
:`
:♥
:O
-_-
:"(
:H
:(
:Z
:T
:<