Div Slider between images on Hover

Question

Good afternoon, I need to set up a project for a photography client and the same asked me something I had never done, I tried to search the internet but I could not find something to help what I need.

I need in the DIV where the album preview appears, when passed over with the mouse (Hover) start an image slider (about 4 or 5 images).

Something like this, but I tried to shorten the change time, but it was a mistake... https://tympanus.net/TipsTricks/FastHoverSlideshow/

Does anyone know of any library that does this? Or that is simple CSS not to weigh too much the site

Answer 1

You can do with mouseenter (start) and mouseleave (stop) and setInterval that will make the looping by switching between images.

$(document).ready(function(){
   
   var tempo;
   $("#slider").on("mouseenter", function(){
      var img = $(this).find("img"); // pego as imagens
      var num = img.length; // pego o número de imagens
      var idx = $(this).find("img:visible").index(); // pego o index da imagem visível
      
      tempo = setInterval(function(){
         $(img).eq(idx).hide();
         idx++;
         if(idx >= num) idx = 0;
         $(img).eq(idx).show();
      }, 150);
      
   }).on("mouseleave", function(){
      clearInterval(tempo);
   });
   
});

#slider{
   width: 200px;
   height: 400px;
   position: relative;
}

#slider img{
   width: 100%;
   height: 100%;
   position: absolute;
   left: 0;
   top: 0;
   display: none;
}

#slider img:nth-child(1){ /* primeiro imagem visível*/
   display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider">
   <img src="http://img2.timeinc.net/instyle/images/2006/galleries/071206_the_look_celtic_03a.jpg" />
   <img src="http://cdn-img.instyle.com/sites/default/files/styles/480xflex/public/images/2007/lotd/091007_richie_200x400_5.jpg" />
   <img src="https://www.japantimes.co.jp/wp-content/uploads/2013/02/fs20060926a3b.jpg" />
   <img src="http://sboutique.style/wp-content/uploads/2017/04/Tribal_Spring_17_56.jpg" />
   <img src="http://www.flare.com/wp-content/uploads/2009/09/online_Nixxi.jpg" />
</div>

Answer 2

Option with multiple images and @keyframes without needing to build a Sprit, with this option you can use single images and include as many as you want.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.container {
    width: 333px;
    height: 500px;
    overflow: hidden;
    position: relative;
}
.container:hover .foto {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    animation: sprite 600ms infinite;
}
.container .foto:nth-child(1) {

}
.container .foto:nth-child(2) {
    animation-delay: 200ms;
}
.container .foto:nth-child(3) {
    animation-delay: 400ms;
}
@keyframes sprite {
    0% {opacity: 1;}
    49% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 0;}
}
.container:hover::after {
    content: "Seu Texto";
    color: #fff;
    line-height: 500px;
    font-size: 32px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    z-index: 2;
    cursor: pointer;
}

<h1>Multiplar imagens no Hover</h1>
<div class="container">
    <img class="foto" src="https://tympanus.net/TipsTricks/FastHoverSlideshow/images/2.jpg" alt="">
    <img class="foto" src="https://tympanus.net/TipsTricks/FastHoverSlideshow/images/7.jpg" alt="">
    <img class="foto" src="https://tympanus.net/TipsTricks/FastHoverSlideshow/images/8.jpg" alt="">
</div>

---

You can use the old technique of Sprite plus @keyframes to have a similar effect only with CSS.

See below for an example of how Sprite is used in :Hover and how you can apply the technique in this case.

.container {
    width: 75px;
    height: 110px;
    background-image: url(http://finalbossblues.com/wp-content/uploads/2013/12/walk4.gif);
    background-repeat: no-repeat;
    overflow: hidden;
}
.container:hover {
    animation: andar 1s steps(4) infinite;
}
@keyframes andar {
    from {background-position: 0;}
    to {background-position: -302px;}
}
.container-moda {
    width: 100px;
    height: 300px;
    background-image: url(http://cdn04.cdn.justjared.com/wp-content/uploads/headlines/2017/09/kendall-jenner-bella-hadid-michael-kors-nyfw.jpg);
    background-repeat: no-repeat;
    overflow: hidden;
}
.container-moda:hover {
    animation: andar-moda 0.75s steps(3) infinite;
}
@keyframes andar-moda {
    from {background-position: 0;}
    to {background-position: -300px;}
}

<h1>Sprite</h1>
<div class="container"></div>
<h1>Troca foto</h1>
<div class="container-moda"></div>

OBS1: You need to put all your images in one file only, as in the image below for example:

OBS2: It wasn’t perfect because I used images I found in Google only as an example, but with the correct measurements of height and width of the image is perfect