Demo for Vertical Image Gallery Code with Preview on Hover

Preview

Source Code

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


<style>
body {
    background-color: #3366CC;
}
.grande {
    width: 280px;
    max-height: 326px;
    height: auto;
    position: absolute;
    top: 8px;
    left: 74px;
    margin-bottom: 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.mini {
    width: 48px;
    height: 48px;
    padding: 5px;
    margin-bottom: 5px;
    border: #BEBEBE solid 1px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
</style>

</head>
<body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<img src="http://www.devanswer.com/img/vertical-slider-1.jpg" class="mini"/><br>
<img src="http://www.devanswer.com/img/vertical-slider-2.jpg" class="mini"/><br>
<img src="http://www.devanswer.com/img/vertical-slider-3.jpg" class="mini"/><br>
<img src="http://www.devanswer.com/img/vertical-slider-4.jpg" class="mini"/><br>
<img src="http://www.devanswer.com/img/vertical-slider-5.jpg" class="mini"/>
<img id="image1" src="http://www.devanswer.com/img/vertical-slider-1.jpg" class="grande"/><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
<script>
$(document).ready(function () {
    $('.mini').hover(function () {
        var img = $(this).attr('src');
        $('.grande').attr('src', img);
    });
});
</script>

</body>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpbh-mt'},{'server':'p3plmcpnl484880'},{'dcenter':'p3'},{'cp_id':'765442'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></html>

Other Codes

Responsive Image Slider with Thumbnails . . .

Each slide in this post has a small thumbnail at the bottom of the page that when the slide is selected, the thumbnail will also be colored. Each slide . . .

3D Cubic Slider Code

In this post, thumbnail images are displayed as galleries. But to display each image, a cube rotates and the images are around this cube.

Animated Clip Path Slider Concept

In this code we have a different slider and full screen. This slider displays two images at a time. Images of this slider are cropped during square hover.

3D Turning Pages of Book with CSS

In this post, we have a very beautiful slider in the form of a book. This is a 3D slider that automatically shows photos one by one.