Using thumbnail will make your website look very professional and you will be able to attract visitors in the first look. In this code, Bootstrap shows your desired color in hover mode by covering it. Besides, there is a star shown in hovering. There is also a button to refresh the colors in this section, which by clicking on it, changes all the colors of each thumbnail and creates a new color spectrum that can be used to manage the theme.


HTML
<!-- This script got from www.devanswer.com -->
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>
<style>
    .glyphicon {
        position: absolute;
        color: #fff;
        top: 50%;
        right: 50%;
        font-size: 2em;
        margin: -15px;
        opacity: 0;
        transition: all ease .5s;
        -webkit-transition: all ease .5s;
        -moz-transition: all ease .5s;
    }
</style>
<div class="container text-center">
    <h2>Thumbnails
        <br><small>With overlay effect on hover and refresh colours btn</small>
    </h2>
  <div class="row">
    <div class="col-sm-4 col-md-3">
      <div class="thumb">
        <a href="#">
          <img data-src="holder.js/533x400?auto=yes&random=yes" class="img-responsive">
          <div class="hover-opaque">
          </div>
          <span class="glyphicon glyphicon-star text-center" aria-hidden="true"></span>
        </a>
      </div>
      <div class="thumb thumb-caption text-center">
        <figcaption><a href="#">Thumbnail Caption</a></figcaption>
      </div>
    </div>
    <!-- end-column -->
    <div class="col-sm-4 col-md-3">
      <div class="thumb">
        <a href="#">
          <img data-src="holder.js/533x400?auto=yes&random=yes" class="img-responsive">
          <div class="hover-opaque">
          </div>
          <span class="glyphicon glyphicon-star text-center" aria-hidden="true"></span>
        </a>
      </div>
      <div class="thumb-caption text-center">
        <figcaption><a href="#">Thumbnail Caption</a></figcaption>
      </div>
    </div>
    <!-- end-column -->
    <div class="col-sm-4 col-md-3">
      <div class="thumb">
        <a href="#">
          <img data-src="holder.js/533x400?auto=yes&random=yes" class="img-responsive">
          <div class="hover-opaque">
          </div>
          <span class="glyphicon glyphicon-star text-center" aria-hidden="true"></span>
        </a>
      </div>
      <div class="thumb-caption text-center">
        <figcaption><a href="#">Thumbnail Caption</a></figcaption>
      </div>
    </div>
    <!-- end-column -->
    <div class="col-sm-4 col-md-3">
      <div class="thumb">
        <a href="#">
          <img data-src="holder.js/533x400?auto=yes&random=yes" class="img-responsive">
          <div class="hover-opaque">
          </div>
          <span class="glyphicon glyphicon-star text-center" aria-hidden="true"></span>
        </a>
      </div>
      <div class="thumb-caption text-center">
        <figcaption><a href="#">Thumbnail Caption</a></figcaption>
      </div>
    </div>
    <!-- end-column -->
    <div class="col-sm-4 col-md-3">
      <div class="thumb">
        <a href="#">
          <img data-src="holder.js/533x400?auto=yes&random=yes" class="img-responsive">
          <div class="hover-opaque">
          </div>
          <span class="glyphicon glyphicon-star text-center" aria-hidden="true"></span>
        </a>
      </div>
      <div class="thumb-caption text-center">
        <figcaption><a href="#">Thumbnail Caption</a></figcaption>
      </div>
    </div>
    <!-- end-column -->
    <div class="col-sm-4 col-md-3">
      <div class="thumb">
        <a href="#">
          <img data-src="holder.js/533x400?auto=yes&random=yes" class="img-responsive">
          <div class="hover-opaque">
          </div>
          <span class="glyphicon glyphicon-star text-center" aria-hidden="true"></span>
        </a>
      </div>
      <div class="thumb-caption text-center">
        <figcaption><a href="#">Thumbnail Caption</a></figcaption>
      </div>
    </div>
    <!-- end-column -->
    <div class="col-sm-4 col-md-3">
      <div class="thumb">
        <a href="#">
          <img data-src="holder.js/533x400?auto=yes&random=yes" class="img-responsive">
          <div class="hover-opaque">
          </div>
          <span class="glyphicon glyphicon-star text-center" aria-hidden="true"></span>
        </a>
      </div>
      <div class="thumb-caption text-center">
        <figcaption><a href="#">Thumbnail Caption</a></figcaption>
      </div>
    </div>
    <!-- end-column -->
    <div class="col-sm-4 col-md-3">
      <div class="thumb">
        <a href="#">
          <img data-src="holder.js/533x400?auto=yes&random=yes" class="img-responsive">
          <div class="hover-opaque">
          </div>
          <span class="glyphicon glyphicon-star text-center" aria-hidden="true"></span>
        </a>
      </div>
      <div class="thumb-caption text-center">
        <figcaption><a href="#">Thumbnail Caption</a></figcaption>
      </div>
    </div>
    <!-- end-column -->


  </div>
  <!-- end-row -->
  <button class="btn btn-default" id="refresh">Refresh Colours</button>
  <h4>Placeholders powered by <a href="https://github.com/imsky/holder" target="_blank">Holder.js</h4>

</div>
<!-- end-container -->
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/holder/2.8.1/holder.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js'></script><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>

CSS
    .row > div {
        margin: 15px auto;
    }

    .thumb {
        position: relative;
        margin: 0 auto;
        max-width: 533px;
    }

    .hover-opaque {
        background: #000;
        opacity: 0;
        position: absolute;
        top: 0px;
        width: 100%;
        height: 100%;
        transition: all ease .5s;
        -webkit-transition: all ease .5s;
        -moz-transition: all ease .5s;
    }

        .hover-opaque i {
            position: absolute;
            text-align: center;
            color: red;
            top: 50%;
            right: 50%;
            margin: -12px;
            border: 1px solid green;
        }

   /* .glyphicon {
        position: absolute;
        color: #fff;
        top: 50%;
        right: 50%;
        font-size: 2em;
        margin: -15px;
        opacity: 0;
        transition: all ease .5s;
        -webkit-transition: all ease .5s;
        -moz-transition: all ease .5s;
    }
*/
    .thumb:hover .hover-opaque {
        opacity: 0.5;
    }

    .thumb:hover .glyphicon {
        opacity: 1;
    }



    .thumb-caption {
        background: #fff;
        border-color: #E6E6E6;
        border-style: solid;
        border-width: 0px 1px 1px 1px;
        color: #4E4E54;
        padding: 10px;
    }

    figcaption a {
        color: #4E4E54;
        -moz-transition: color 0.5s ease;
        -webkit-transition: color 0.5s ease;
        transition: color 0.5s ease;
        font-size: 0.9em;
    }

        figcaption a:hover {
            color: #73A7F7;
            text-decoration: none;
        }

    @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
    @import url(https://fonts.googleapis.com/css?family=Ubuntu:400,700);

    body {
        background: #F5F5F5;
        margin: 50px;
        font-family: Ubuntu, sans-serif;
        font-weight: 700;
    }

    button {
        margin: 15px;
    }

    h2, h4 {
        text-align: center;
    }

    h2 {
        margin-top: 0px;
    }

    h4 {
        margin: margin-bottom: 0px;
    }
Javascript
function customThemes() {

    var customTheme = {};
    var numThemes = 200;

    for (var i = 0; i < numThemes; i++) {
        customTheme["pastel" + i] = {
            background: getRandomPastel(),
            foreground: "#4E4E54"
        };
    }
    return customTheme;
}

getRandomPastel = function () {
    var hue = Math.floor(Math.random() * 360);
    return 'hsl(' + hue + ', 85%, 80.5%)';
};

Holder.run({
    themes: customThemes()
});

$(function () {
    $("#refresh").click(function () {
        Holder.run({
            themes: customThemes()
        });
    })
    });

 Previous

Double-faced Thumbnail with Fade Effect

Thumbnail with two sides for text and image with fading effect.

Double-faced Thumbnail with Fade Effect
Slider with Thumbnail Navigation On hover

Slider with Thumbnail Navigation On hover

An automatic slider that also allows you to flip through the slides manually and comes with a Thumbnail On Hover.

  Next