Ads

Effect Hover Pada Gambar

Kali ini saya akan membagikan beberapa effect hover pada gambar ketika di sorot ataupun di sentuh.

Effect Hover Pada Gambar
Dagruel

dan untuk cara pasang kalian tinggal copy css di bawah kedalam template kalian.

Dan gunakan HTML nya Di dalam Postingan.

1. Ply Hover

Effect yang pertama ketika gambar di sorot maka akan muncul ikon yang lain contoh nya ada di template SeleSeven.

.plyHover{display:inline-block;position:relative;overflow:hidden;line-height:0}
.plyHover .ply{z-index:1;background:rgba(0, 0, 0, .67);visibility:hidden;opacity:0;transition:visibility 0s, opacity .3s linear}
.plyHover .ply,.plyHover .ply:before{position:absolute;top:0;left:0;right:0;height:100%;width:100%}
.plyHover .ply:before{content:'';background-repeat:no-repeat;background-position:center;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.68,12.32C16.92,10.56 14.07,10.57 12.32,12.33C10.56,14.09 10.56,16.94 12.32,18.69C13.81,20.17 16.11,20.43 17.89,19.32L21,22.39L22.39,21L19.3,17.89C20.43,16.12 20.17,13.8 18.68,12.32M17.27,17.27C16.29,18.25 14.71,18.24 13.73,17.27C12.76,16.29 12.76,14.71 13.74,13.73C14.71,12.76 16.29,12.76 17.27,13.73C18.24,14.71 18.24,16.29 17.27,17.27M10.9,20.1C10.25,19.44 9.74,18.65 9.42,17.78C6.27,17.25 4,15.76 4,14V17C4,19.21 7.58,21 12,21V21C11.6,20.74 11.23,20.44 10.9,20.1M4,9V12C4,13.68 6.07,15.12 9,15.7C9,15.63 9,15.57 9,15.5C9,14.57 9.2,13.65 9.58,12.81C6.34,12.3 4,10.79 4,9M12,3C7.58,3 4,4.79 4,7C4,9 7,10.68 10.85,11H10.9C12.1,9.74 13.76,9 15.5,9C16.41,9 17.31,9.19 18.14,9.56C19.17,9.09 19.87,8.12 20,7C20,4.79 16.42,3 12,3Z' fill='%23fff'/%3E%3C/svg%3E");opacity:0;transition:visibility 0s, opacity .3s linear}
.plyHover:hover .ply{visibility:visible;opacity:1}
.plyHover:hover .ply:before{opacity:1}
<div class="plyHover">
  <div class="ply"></div>
  <img src="https://cdn.myanimelist.net/images/anime/1900/110097.webp" alt="plyHover">
</div>

2. Scale Hover

Kedua Zoom effect jadi saat gambar di sorot maka gambar akan masuk mode zoom, seperti gambar postingan di halaman depan blog saya ini.

.scaleHover{display:inline-block;line-height:0;overflow:hidden}
.scaleHover img{transition:transform .3s ease-out;-webkit-transition:-webkit-transform .3s ease-out;}
.scaleHover:hover img{transform:scale(1.2);-webkit-transform:scale(1.2)}
<div class="scaleHover">
  <img src="https://cdn.myanimelist.net/images/anime/1900/110097.webp" alt="scaleHover">
</div>

3. Shake Hover

Effect ini saya dapatkan dari blog igniel. Yang mana effect nya membuat gambar bergoyang kanan dan kiri seperti gambar di atas.

@keyframes shakeHover{10%, 90% {transform:translate3d(-1px, 0, 0)}20%, 80% {transform:translate3d(2px, 0, 0)}30%, 50%, 70% {transform:translate3d(-4px, 0, 0)}40%, 60% {transform:translate3d(4px, 0, 0)}}
@-webkit-keyframes shakeHover{10%, 90% {transform:translate3d(-1px, 0, 0)}20%, 80% {transform:translate3d(2px, 0, 0)}30%, 50%, 70% {transform:translate3d(-4px, 0, 0)}40%, 60% {transform:translate3d(4px, 0, 0)}}
.shakeHover:hover{animation:shakeHover .82s cubic-bezier(.36, .07, .19, .97) both;transform:translate3d(0, 0, 0);backface-visibility:hidden;perspective:1000px}
<img class="shakeHover" src="https://cdn.myanimelist.net/images/anime/1900/110097.webp" alt="shakeHover">

4. Spin Hover

Menggunakan Effect ini tidak terlalu bagus menurut saya. Jadi saat gambar di sorot maka gambar tersebut akan berputar 360 derajat.

.spinHover{transition:transform .7s ease-out;-webkit-transition: -webkit-transform .7s ease-out;-ms-transition:-ms-transform .7s ease-out}
.spinHover:hover{transform:rotate(360deg);-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg)}
<img class="spinHover" src="https://cdn.myanimelist.net/images/anime/1900/110097.webp" alt="spinHover">

Untuk Saat Ini Hanya 4 itu saja. Tapi jika ada yang ingin di tambakan silahkan coret-coret kolom komentar.

Comments

Blogger Disqus
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
  • Gunakan <i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>
×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!