Using effects in thumbnails will make the images more visible and your website visitor will enjoy these images more. In this post, the images also have an effect in normal mode. This effect gently moves the images up and down. This movement is done automatically and does not require any clicking or cursor movement of the mouse.
HTML
<!-- This script got from www.devanswer.com -->
<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>
CSS
.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);
}
}
