Membuat Hover Effect Slider

Hallo Sahabat,
Saya Al Muhammad akan berbagi sedikit tips bagaimana cara membuat Effect Hover Slider untuk Thumbnail blog menjadi Terlihat keren.
Sebenarnya tidak terlalu sulit cara membuatnya.

Saya akan mencontohkannya lagi menggunakan Template VioMagz dari mas Sugeng
Langsung saja Tutorialnya

Tutorial

Pertama, login ke Blogger > Pilih Blog > Klik menu Tema dan klik tombol Edit HTML >
Cari Kode </head> / &lt;/head&gt;&lt;!--<head/>--&gt; Dan Paste diatasnya :

<style type="text/css">
/*Al-Muhammad Overlay Slider*/
.overlayer {
  position: absolute;
  bottom: 0;
  left: 100%;
  right: 0;
  opacity: 0.5;
  background-color: #ff7b30;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .3s ease;
}
.img-thumbnail:hover .overlayer {
  width: 100%;
  left: 0;
}
.textor {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
</style>

Kedua, Ubah kode dibawah ini :

<div class='img-thumbnail'>
  <b:if cond='data:post.thumbnailUrl'>
    <a expr:href='data:post.url'><img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl, 255, &quot;300:200&quot;)' expr:title='data:post.title'/>
    </a> 
  <b:else/>
    <b:if cond='data:post.firstImageUrl'>
    <a expr:href='data:post.url'><img expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title'/>
    </a>
  <b:else/>
    <a expr:href='data:post.url'><img expr:alt='data:post.title' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEise8owx2yVKswKeZvxGXrIyKjsmVx44r3dVkDnF1r5iX1SV5CLHuMLJtWG8tsoaC8EedA17UIdyhtXlExPiAo-Y3-XCpZqvaDKpnhPxDjMipl5jpsJhp5f9fMfYz8QueLg4sl-4dYbwZWN/w255-c-h170/no-image.png'/>
    </a>

Ubah Menjadi :

<div class='img-thumbnail'>
  <b:if cond='data:post.thumbnailUrl'>
    <a expr:href='data:post.url'><img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl, 255, &quot;300:200&quot;)' expr:title='data:post.title'/>
<div class='overlayer'>
    <div class='textor'><data:post.author/></div>
  </div>
    </a> 
  <b:else/>
    <b:if cond='data:post.firstImageUrl'>
    <a expr:href='data:post.url'><img expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title'/>
<div class='overlayer'>
    <div class='textor'><data:post.author/></div>
  </div>    
</a>
  <b:else/>
    <a expr:href='data:post.url'><img expr:alt='data:post.title' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEise8owx2yVKswKeZvxGXrIyKjsmVx44r3dVkDnF1r5iX1SV5CLHuMLJtWG8tsoaC8EedA17UIdyhtXlExPiAo-Y3-XCpZqvaDKpnhPxDjMipl5jpsJhp5f9fMfYz8QueLg4sl-4dYbwZWN/w255-c-h170/no-image.png'/>
<div class='overlayer'>
    <div class='textor'>No Image</div>
  </div>    
</a>

Selesai.

Contoh & Fungsi

Hasilnya akan Menjadi:

Al Muhammad	Pengaturan : #ff7b30 = Kode Warna Oranye. Silahkan Ubah Dengan Kode Warna Yang Lain. opacity 0.5; = Tingkat Transparan Overlaynya, Kalian bisa ubah 0.5 Menjadi 0.2 / 0.7 / 1 Sesuai Selera

Begitulah cara membuat Hover Effect Image.
Silahkan Komentar Jika kalian Mengalami Kesulitan dalam Penerapannya.

Share this post