Membuat Hover Effect Gradient Keren Untuk Thumbnail Blog

Hallo Sahabat,
Saya Al Muhammad ingin berbagi Script Keren untuk membuat Hover Effect Gradient Untuk Thumbnail Blog.
Terutama Untuk Template VioMagz dari Mas Sugeng, karena Saya Mencontohkannya di Template Tersebut

TUTORIAL

Pertama, login ke Blogger > Pilih Blog > Klik menu Tema dan klik tombol Edit HTML >

Cari Kode Berikut :

.img-thumbnail {
 position: relative;
 float: left;
 width: 255px;
 height: 170px;
}

.img-thumbnail img {
 width: 255px;
 height: 170px;
 display: block;
}

Dan Ubah Menjadi :

.img-thumbnail {
 position: relative;
 float: left;
 width: 255px;
 height: 170px;
 background: #000;
   background: -moz-linear-gradient(-45deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
 background: -webkit-linear-gradient(-45deg, #000000 0%,#000000 25%,#1e539e 50%,#ff3083 75%,#7800a8 100%);
 background: linear-gradient(135deg, #000000 0%,#000000 25%,#1e539e 50%,#ff3083 75%,#7800a8 100%);
  background-size: 400% 400%;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  cursor: pointer;
  transition: .5s all;
}

.img-thumbnail img {
 width: 255px;
 height: 170px;
 display: block;
 position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    opacity: .5;
    mix-blend-mode: screen;
}
.img-thumbnail:hover {
    background-position: 100% 100%;
  }

Lalu Simpan Template > Selesai.

Maka Hasilnya akan seperti ini.

See the Pen CSS Gradient Hover Effect Thumbnail by Fadel Muhammad (@fadelnavi) on CodePen.

Sekian Trick dari Saya untuk Membuat Script Keren untuk Membuat Hover Effect Gradient.

Share this post