jQuery Plugin For Switching Between Images On Hover - hovercover

hovercover is an extremely lightweight jQuery plugin which enable the users to fade through a group of images on mouse hover & move.

See also:

• jQuery Plugin To Shuffle Through Images By Mouse Moving - Shuffle Images
• jQuery Plugin For Image Slider with Mouse Interaction - serce.js
• Mouse-aware jQuery Responsive Image Gallery Plugin - skimThrough

How to use it:

1. The html structure.

<div class="hovercover">

  <img src="images/sizekeeper.svg" class="hovercover-sizekeeper">

  <div class="hovercover-images">
    <img class="hovercover-image" src="1.jpg">
    <img class="hovercover-image" src="2.jpg">
    <img class="hovercover-image" src="3.jpg">
    ...
  </div>

  <div class="hovercover-tabs-wrapper">
    <div class="hovercover-tabs"></div>
  </div>

</div>

2. The primary CSS styles.

.hovercover {
  overflow: hidden;
  position: relative;
}

.hovercover-sizekeeper {
  max-width: 100%;
  visibility: hidden;
}

.hovercover-images {
  bottom: 0px;
  left: 0px;
  position: absolute;
  right: 0px;
  top: 0px;
}

.hovercover-image {
  left: 50%;
  max-width: 100%;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: .25s;
  -webkit-transition: .25s;
}

.hovercover-image:first-child { opacity: 1; }

.hovercover-tabs-wrapper {
  bottom: 0px;
  left: 0px;
  position: absolute;
  right: 0px;
  top: 0px;
}

.hovercover-tabs {
  display: table;
  height: 100%;
  width: 100%;
}

.hovercover-tab { display: table-cell; }

3. Place jQuery library and the jQuery hovercover plugin at the bottom of the html document. That's it.

<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="js/jquery.hovercover.js"></script>

---

This awesome jQuery plugin is developed by olehpratsko. For more Advanced Usages, please check the demo page or visit the official website.