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/AVvXsEi5rzTHbNzCcrHvZ7MzOQ2nq61iVVIUcCEybeN6dQg76iuGOWtRcQdEkLlQ3tXAuGnwEvoUyKc2S060S_tuMw3QNt2xqzYEvxbl-1CnjgKEtkwPbB0APD_wgQjovK6ATyl8h-2f0yvKLnw/w370-c-h200/aroni-arsa-children-little.jpg"></a>
      </div>
  </li>