<ul class="cards">
    <li class="card">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/js_cover.png" alt="">
      <img src="https://thumbsplus.tutsplus.com/uploads/users/71/ebooks/583/preview_image/TypeScriptModernJavaScriptDev.jpg?height=300&width=300" alt="">
      <img src="https://thumbsplus.tutsplus.com/uploads/users/71/ebooks/630/preview_image/MasteringReactiveJavaScript.jpg?height=300&width=300" alt="">
      <img src="https://thumbsplus.tutsplus.com/uploads/users/71/ebooks/595/preview_image/BuildingModernWebApplicationsUsingAngular.jpg?height=300&width=300" alt="">
      <img src="https://thumbsplus.tutsplus.com/uploads/users/71/ebooks/504/preview_image/Angular2Cookbook.jpg?height=300&width=300" alt="">
    </li>
    <li class="card">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/swift_cover.png" alt="">
      <img src="https://thumbsplus.tutsplus.com/uploads/users/71/ebooks/626/preview_image/SwiftFunctionalProgramming.jpg?height=300&width=300" alt="">
      <img src="https://thumbsplus.tutsplus.com/uploads/users/71/ebooks/601/preview_image/SwiftiOSProgKids.jpg?height=300&width=300" alt="">
      <img src="https://thumbsplus.tutsplus.com/uploads/users/71/ebooks/493/preview_image/SwiftDataStructureAlgorithms.jpg?height=300&width=300" alt="">
    </li>

    <li class="card">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/android_cover.png" alt="">
      <img src="https://thumbsplus.tutsplus.com/uploads/users/71/ebooks/632/preview_image/ReactiveAndroidProgramming.jpg?height=300&width=300" alt="">
      <img src="https://thumbsplus.tutsplus.com/uploads/users/71/ebooks/637/preview_image/AndroidThingsProjects.jpg?height=300&width=300" alt="">
    </li>
    <li class="card">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/python_cover.png" alt="">
      <img src="https://thumbsplus.tutsplus.com/uploads/users/71/ebooks/629/preview_image/LearnPython7Days.jpg?height=300&width=300" alt="">
    </li>
  </ul>
* {
  padding: 0;
  margin: 0;
}

ul {
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

body {
  background: #f2f2f2;
  padding: 50px;
}

.cards {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 auto;
}

.card {
  position: relative;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
}

.card:hover {
  cursor: pointer;
}

.card img:not(:first-of-type) {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  /*visibility: hidden;*/
}

.card img.is-visible {
  opacity: 1;
  /*visibility: visible;*/
}
window.addEventListener("load", init);
window.addEventListener("resize", init);

function init() {
  const cards = document.querySelectorAll(".card");
  cards.forEach(el => {
    // get number of child img of this card excluding the first img
    const numOfChildImages = el.querySelectorAll("img:not(:first-of-type)").length;
    if (numOfChildImages > 0) {
      // get card's width
      const { width } = el.getBoundingClientRect();
      // create ranges
      const parts = width / numOfChildImages;
      el.addEventListener("mousemove", e => {
        // get mouse X position
        const xPos = e.pageX - el.offsetLeft;
        // remove is-visible class from img
        removeIsVisibleClass();
        // check which img to show
        switch (numOfChildImages) {
          case 1:
            if (xPos > 0 && xPos <= parts) {
              addClass(el, "img:nth-child(2)");
            }
            break;
          case 2:
            if (xPos > 0 && xPos <= parts) {
              addClass(el, "img:nth-child(2)");
            } else if (xPos > parts && xPos <= parts * 2) {
              addClass(el, "img:nth-child(3)");
            }
            break;
          case 3:
            if (xPos > 0 && xPos <= parts) {
              addClass(el, "img:nth-child(2)");
            } else if (xPos > parts && xPos <= parts * 2) {
              addClass(el, "img:nth-child(3)");
            } else if (xPos > parts * 2 && xPos <= parts * 3) {
              addClass(el, "img:nth-child(4)");
            }
            break;
          case 4:
            if (xPos > 0 && xPos <= parts) {
              addClass(el, "img:nth-child(2)");
            } else if (xPos > parts && xPos <= parts * 2) {
              addClass(el, "img:nth-child(3)");
            } else if (xPos > parts * 2 && xPos <= parts * 3) {
              addClass(el, "img:nth-child(4)");
            } else if (xPos > parts * 3 && xPos <= parts * 4) {
              addClass(el, "img:nth-child(5)");
            }
            break;

          // more cases here

          // you may want to have a default statement also
          // default:
          // something here
        }
      });
    }

    el.addEventListener("mouseleave", () => {
      removeIsVisibleClass();
    });
  });
}

function addClass(parent, child, className = "is-visible") {
  parent.querySelector(child).classList.add(className);
}

function removeIsVisibleClass() {
  if (document.querySelector("img.is-visible")) {
    document.querySelector("img.is-visible").classList.remove("is-visible");
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.