Demo for HTML Thumbnail Image with Auto Scroll

Preview

Source Code

                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
.thumb {
  background-color: black;
  height: 400px;
  overflow: hidden;
  width: 400px;
}
.thumb > img {
  animation: thumbImg 5s linear alternate infinite;
}
@keyframes thumbImg {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(calc(-100% + 400px));
  }
}
.thumb-position {
  background-color: black;
  height: 400px;
  overflow: hidden;
  width: 400px;
}
.thumb-position > img {
  animation: thumbImgPosition 5s linear alternate infinite;
  position: relative;
}
@keyframes thumbImgPosition {
  0% {
    bottom: 0;
  }
  100% {
    bottom: calc(-100% + 500px);
  }
}
</style>

</head>
<body>
<div style="float:left;margin-right:30px"><strong>Translate</strong>
<div class="thumb">
  <img src="https://picsum.photos/id/301/400/500" alt="">
</div>
</div>
<div><strong>Position</strong>
<div class="thumb-position">
  <img src="https://picsum.photos/id/301/400/500" alt="">
</div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>

</body>
</html>

Other Codes

Varios CSS Hover Effects for Thumbnails

In this post, thumbnails have different effects during hover time. But they all have one thing in common, and that is the display of text below the thumbnail . . .

CSS Thumbnail 3D Rotation on Hover

In this beautiful thumbnail, there is normally only the shadow of the image. In hover mode, the image rotates at the same time as it becomes three-dimensional, . . .

HTML Thumbnail with Image Preview on Click

In this post, we have six thumbnails. These images zoom in a bit during the hover and the mouse icon also changes. Clicking on any of the images will . . .

CSS Thumbnail with Caption Revealing on . . .

In this post, we have some thumbnails together. These images disappear during the hover and the title below them is displayed in white with animation.