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 !

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCOvf6ozf3U6WwEhrDyHWD6YSlFa5MQ7uUGwzDqUD2CaqZ19UzrY9BPCViPEwng0HaoJISEKf9WLA-ShyiPaeccxVMV1YdpVbXh5U0P4F6ZDi-Qohi3WMAabqUz0RO2NQ2nK7mKy5FEpY/w370-c-h200/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.