Div Slider between images on Hover

Navigation
1

Good afternoon, I need to set up a project for a photography client and he asked me for something I had never done, I tried to search the internet but I did not find anything that would help me what I needed.

I need in the DIV where the preview of the album appears, when hovering, start an image slider (about 4 or 5 images).

Something like this, but I tried to shorten the changeover time, but it made a mistake ... link

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

    
asked by anonymous 15.02.2018 / 16:57

2 answers

3

You can do with mouseenter (start) and mouseleave (stop) and setInterval that will looping alternating 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><divid="slider">
   <img src="http://img2.timeinc.net/instyle/images/2006/galleries/071206_the_look_celtic_03a.jpg"/><imgsrc="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"/><imgsrc="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>
    
15.02.2018 / 17:58
1

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 like. 

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 with CSS only.

See abaiso the example of how the 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 a single file, as in the image below for example:

OBS2: It was not perfect because I used images I found in Google just as an example, but with the correct height and width measures the image is perfect.

    
15.02.2018 / 17:43
Prioritize row in sql queries Change image by CSS depending on the access device