JSFiddle - React, Tailwind, and code Playground

by L_03k

HTML

<div class="indexItem">
          <h5 class="indexInfo">info</h5>
          <h1 class="indexTitle">Presentation</h1>
          <div class="indexImage" id="hoverImage">
            <img src="https://source.unsplash.com/bzdhc5b3Bxs" />
          </div>
        </div>
        
                <div class="indexItem">
          <h5 class="indexInfo">info</h5>
          <h1 class="indexTitle">Swimpool</h1>
          <div class="indexImage" id="hoverImage">
            <img src="https://source.unsplash.com/tqkbzYfIhCI" />
          </div>
        </div>
        
                <div class="indexItem">
          <h5 class="indexInfo">info</h5>
          <h1 class="indexTitle">Soldiers</h1>
          <div class="indexImage" id="hoverImage">
            <img src="https://source.unsplash.com/tT3LjNT-Oq8" />
          </div>
        </div>
        
                <div class="indexItem">
          <h5 class="indexInfo">info</h5>
          <h1 class="indexTitle">Lab</h1>
          <div class="indexImage" id="hoverImage">
            <img src="https://source.unsplash.com/PT70CT6mATQ" />
          </div>
        </div>
        
                <div class="indexItem">
          <h5 class="indexInfo">info</h5>
          <h1 class="indexTitle">City</h1>
          <div class="indexImage" id="hoverImage">
            <img src="https://source.unsplash.com/wpU4veNGnHg" />
          </div>
        </div>
        
                <div class="indexItem">
          <h5 class="indexInfo">info</h5>
          <h1 class="indexTitle">Winter</h1>
          <div class="indexImage" id="hoverImage">
            <img src="https://source.unsplash.com/5AiWn2U10cw" />
          </div>
        </div>

CSS

body{
  background: #000000;
}

.indexItem {
  margin: 16px 0pt;
  color: #ffffff;
  text-align: center;
}

.indexInfo {
  margin-bottom: -20px;
  text-shadow: 0px 0px 32px rgba(0, 0, 0, 0.8);
}

.indexTitle {
  transition: 0.2s;
  text-shadow: 0px 0px 32px rgba(0, 0, 0, 0.8);
}

.indexTitle.redStroke, .indexTitle:hover {
  -webkit-text-stroke: 1px #EA1404;
  text-stroke: 1px red;
  color: transparent;
}

.indexImage {
  width: 83.33%;
  height: auto;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  transition: 1s;
  opacity: 0;
}

 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.indexImage.showIndexImage,
.indexTitle:hover+.indexImage {
  opacity: 1;
}

JavaScript

var autoPlay = 0;

$(function() {
  myCarousel();
  $(".indexTitle").mouseenter(pauseCarousel);
  $(".indexTitle").mouseout(playCarousel);
});

function myCarousel() {
  var x = $(".indexTitle");
  var n = $(".indexImage");

  for (i = 0; i < x.length; i++) {
    $(x[i]).removeClass("redStroke");
    $(n[i]).removeClass("showIndexImage");
  }

  autoPlay++;
  if (autoPlay > x.length && n.length) {
    autoPlay = 1
  }

  $(x[autoPlay - 1]).addClass("redStroke");
  $(n[autoPlay - 1]).addClass("showIndexImage");

  myTimeOut = setTimeout(myCarousel, 2000); // Change image every 2.5 seconds

}

function pauseCarousel() {
  console.log("Enter = Pause");
  clearTimeout(myTimeOut);
  $(".indexTitle").removeClass("redStroke");
  $(".indexTitle").removeClass("showIndexImage");
};

function playCarousel() {
  console.log("Exit = Play");
  setTimeout(myTimeOut);
  myCarousel();
};