Make Hover Auto Scroll to Down

Dapat source bagaimana cara menampilkan gambar yang panjang menjulang ke bawah, yg menghabiskan layar monitor kita! Sobat mungkin pernah melihat gambar dengan resolusi tinggi alias pixelnya besar bingit? Secara default browser engine akan memberikan tanda hover pada cursor dengan lambang zoom in/zoom out. Sekarang AA Koben akan berbagi trik tutorial cara agar gambar dengan panjang ke bawah dapat di lihat dengan tidak meninggalkan halaman blog kita! Lantas bagaimana cara melihat gambar bagian bawahnya? Dengan proses hover on image then auto scroll :D Bebas sih penggunaannya bukan terbatas hanya pada gambar :P

.box {
width: 85%;
max-width: 999px;
margin: 5px auto;
background: transparent;
}
.console-container {
overflow: hidden;
}
.console {
width: 666px;
max-width: 100%;
margin: 0 auto;
box-shadow: 0px 5px 15px -1px rgba(0,0,0,0.5);
cursor: s-resize;
}
/* Scroll 'console-body' */
.console-body {
display: block;
position: relative;
width: 100%;
height: 0;
padding-bottom: 55%;
overflow: hidden;
}
.console-body img {
position: absolute;
width: 100%;
top: 0;
transition: 7s ease-out;
}
.console-body:hover img {
-webkit-transform: translateY(-82.1%); /* Custom value */
transform: translateY(-82.1%); /* Custom value */
}

Rubahlah terlebih dahulu nominal tinggi, lebar, padding, margin, nilai transform dll.

<div class="box">
  <div class="console-container">  
    <div class="console">
      <div class="console-body">
        <img src="URL-IMAGE" alt="" />
      </div>
    </div>
  </div>
</div>

Demo & source by Tobias Bogliolo

Bonus

Only CSS: 和嵐 - Text Animation with background - CodePen User Profile Card - Simple CARD hover effect - Contextmenu Snippet - iPhone Notch Scroll 2 - 3D Card Steps - Articles Cards (Dynamic List) - add button - Really simple jQuery slider - asymmetry LP with animate.css & parallax.js - Events App - Hamburger Button - Aspect Ratio Calculator - photo - color visualizer - Twitch Social Popup