◄ Min  Size Fonts: + | - | ± Color: Max ►

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
Loading...
XMake Hover Auto Scroll to Down
Cara membuat hover pada gambar dengan fitur auto scroll ke bawah.
Subscribe my posts Register For Free!
[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE