Z-index blocks the functioning of the gif animation | Jquery CSS HTML JS

Question

I tried to create an on-hover gif animation in an image block using jquery.js.

I use these animations in horizontal or vertical blocks arranged in a grid of three columns. When you hover over the block, the gif is launched, a colored form in blend mode is added with a typography over this gif

In my first example everything works fine, but when I wanted to add this code to a page of my website and changed the Z-index so that these elements no longer overlap on top of my menu-wrapper , the gif did not work anymore (second example).

First example :

$(function () {
  $(".playgif").hover(function () {
    var stat = $(this).find("img").attr("src");
    $(this).find("img").attr("src", $(this).find("img").data("swap"));
    $(this).find("img").data("swap", stat);
  })
});

.grille{
position:relative;
margin-top: 120px;
z-index: 97;
width: 100%;
height: auto;
cursor: url(../images/mini-curseur.html), pointer;
}
.colonne1{
height: auto;   
position: relative;
width: 33.3333%;
float: left;
transition: all 250ms ease-out;
}
.colonne2{
height: auto;   
position: relative;
width: 33.3333%;
float: left;
transition: all 250ms ease-out;
}
.colonne3{
height: auto;   
position: relative;
width: 33.3333%;
float: left;
transition: all 250ms ease-out;
}
.titre_vignette{
font-family: 'Libre Baskerville', serif;
font-size:2vw;
}
.hover_vignettes{
z-index:90;
width:100%;
height:100%;
left:0;
right:0;
z-index:100;
position: absolute;
margin: 0 auto;
opacity: 0;
text-align:center;
-webkit-transition: opacity 250ms ease-in-out;
transition:opacity 250ms ease-in-out;
}

.hover_color{
background:#FF0000;
background-blend-mode: difference;
}
.texte_vignette{
margin-top:30%;
opacity:0;
color:#FFF;
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}
.informations_vignette{
font-size:1.3vw;
margin-top:1.5vw;
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}
.vignette_horizontale:hover .hover_vignettes{
opacity:0.8;
-ms-transform: opacity(0.8); 
-webkit-transform: opacity(0.8);
transform: opacity(0.8);
}
.vignette_horizontale:hover .texte_vignette{
opacity:1;
margin-top:26%;
}
.vignette_horizontale:hover .informations_vignette{
    margin-top:0.5vw;
}
.hover_vignettes_vertical{
z-index:90;
width:100%;
height:100%;
left:0;
right:0;
z-index:100;
position: absolute;
margin: 0 auto;
opacity: 0;
text-align:center;
transform: opacity(0);
-webkit-transition: opacity 250ms ease-in-out;
transition:opacity 250ms ease-in-out;
}
.texte_vignette_verticale{
margin-top:60%;
opacity:0;
color:#FFF;
font-size:1.5vw;
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}
.vignette_verticale:hover .hover_vignettes_vertical{
opacity:0.8;
-ms-transform: opacity(0.8); 
-webkit-transform: opacity(0.8);
transform: opacity(0.8);
}
.vignette_verticale:hover .texte_vignette_verticale{
opacity:1;
margin-top:55%;
}
.vignette_verticale:hover .informations_vignette{
    margin-top:0.5vw;
}
.vignette_horizontale{
position:relative;
width:100%;
z-index:95;
opacity:1;
}
.vignette_horizontale img{
position:relative;
width: 100%;
margin: 0 auto;
height: auto;
display:block;
}
.vignette_verticale{
position:relative;
width:100%;
z-index:95;
opacity:1;
}
.vignette_verticale img{
position:relative;
width: 100%;
margin: 0 auto;
height: auto;
display:block;
}
.description{
height: 35px;
padding-top: 14px;
font-size: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="gif.js"></script>
<body>
 <div id="contenant">
 <div class="grille">
   <div class="colonne1">
     <a class="playgif" href="test.html">  
         <div class="vignette_verticale">
            <div class="hover_vignettes_vertical hover_color">
               <div class="texte_vignette_verticale">
                   <div class="titre_vignette">TEST</div>
                   <div class="informations_vignette"> 
                   lorem ipsum</br>
                   </div>
                </div> 
             </div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vertical_vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vertical_vignette.png">
        </div>
      </a> 
</div> 
<div class="colonne2"> 
  <a  class="playgif" href="test.html">
      <div  class="vignette_horizontale">
         <div  id="anim1" class="hover_vignettes hover_color">
            <div id="anim1" class="texte_vignette">
              <div id="anim1" class="titre_vignette">TEST</div>
              <div  id="anim1" class="informations_vignette">
              lorem ipsum</br>
              </div>
            </div>      
          </div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">
        </div>
    </a> 
  <a class="playgif" href="test.html">
     <div class="vignette_horizontale">
        <div class="hover_vignettes hover_color">
            <div class="texte_vignette">
                <div class="titre_vignette">TEST</div>
                <div class="informations_vignette">
                lorem ipsum</br>
                </div>
             </div>      
         </div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">
      </div>
   </a>               
</div>
<div class="colonne3"> 
   <a class="playgif" href="test.html">
      <div class="vignette_horizontale">
         <div class="hover_vignettes hover_color">
            <div class="texte_vignette">
               <div class="titre_vignette">TEST</div>
               <div class="informations_vignette">
               lorem ipsum</br>
               </div>
             </div>
          </div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">
      </div>
   </a>  
   <a class="playgif" href="test.html">
      <div class="vignette_horizontale">
         <div class="hover_vignettes hover_color">
            <div class="texte_vignette">
               <div class="titre_vignette">TEST</div>
               <div class="informations_vignette">
               lorem ipsum </br>
               </div>
            </div>      
          </div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">
       </div>
      </a> 
    </div>
  </div> 
</div>
</body>

Second example (Edited):

In this second example, the Snippet version work fine but not in my Website page...

I think it's by changing the Z-index values that it doesn't work anymore, but I can't really find if its really that.

$(function () {
  $(".playgif").hover(function () {
    var stat = $(this).find("img").attr("src");
    $(this).find("img").attr("src", $(this).find("img").data("swap"));
    $(this).find("img").data("swap", stat);
  })
});

#loader{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height:100vh;
position: fixed;
      z-index:100;
background-color: #202020;
width: 100%;
}
body{
height: auto;
width: 100%;
background: #fff;
}
h1 { 
color: #fcfcfc;
font-size: 28px;
font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";
}

.header_down{
height: 120px;
position: fixed;
width: 100%;
background: #000;
top: 0;
      z-index: 104;
transition: all 300ms ease-in-out;
}
.hide_header #header{
opacity:0;
}
.grille{
position:relative;
width: 100%;
height: auto;
      z-index: 40;
}
.espacehaut{
height: 120px;
      z-index: 1;
}

.colonne1{
height: auto;   
position: relative;
width: 33.3333%;
float: left;
transition: all 250ms ease-out;
}

.colonne2{
height: auto;   
position: relative;
width: 33.3333%;
float: left;
transition: all 250ms ease-out;
}

.colonne3{
height: auto;   
position: relative;
width: 33.3333%;
float: left;
transition: all 250ms ease-out;
}

.titre_vignette{
font-family: 'Libre Baskerville', serif;
font-size:2vw;
}

.hover_vignettes{
      z-index:100;
width:100%;
height:100%;
left:0;
right:0;
position: absolute;
margin: 0 auto;
opacity: 0;
text-align:center;
-webkit-transition: opacity 250ms ease-in-out;
transition:opacity 250ms ease-in-out;
}

.hover_color{
background:#FF0000;
background-blend-mode: difference;
}

.texte_vignette{
margin-top:30%;
opacity:0;
color:#FFF;
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}

.informations_vignette{
font-size:1.3vw;
margin-top:1.5vw;
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}

.vignette_horizontale:hover .hover_vignettes{
opacity:0.8;
-ms-transform: opacity(0.8); 
-webkit-transform: opacity(0.8);
transform: opacity(0.8);
}

.vignette_horizontale:hover .texte_vignette{
opacity:1;
margin-top:26%;
}

.vignette_horizontale:hover .informations_vignette{
margin-top:0.5vw;
}

.hover_vignettes_vertical{
      z-index:100;
width:100%;
height:100%;
left:0;
right:0;
position: absolute;
margin: 0 auto;
opacity: 0;
text-align:center;
transform: opacity(0);
-webkit-transition: opacity 250ms ease-in-out;
transition:opacity 250ms ease-in-out;
}


.texte_vignette_verticale{
margin-top:60%;
opacity:0;
color:#FFF;
font-size:1.5vw;
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}


.vignette_verticale:hover .hover_vignettes_vertical{
opacity:0.8;
-ms-transform: opacity(0.8); 
-webkit-transform: opacity(0.8);
transform: opacity(0.8);
}


.vignette_verticale:hover .texte_vignette_verticale{
opacity:1;
margin-top:55%;
}


.vignette_verticale:hover .informations_vignette{
margin-top:0.5vw;
}

.vignette_horizontale{
      z-index:95;
position:relative;
width:100%;
opacity:1;
}

.vignette_horizontale img{
position:relative;
width: 100%;
margin: 0 auto;
height: auto;
display:block;
}

.vignette_verticale{
      z-index:95;
position:relative;
width:100%;
opacity:1;
}

.vignette_verticale img{
position:relative;
width: 100%;
margin: 0 auto;
height: auto;
display:block;
}

#navigation-content{
height: 100vh;
width: 100%;
position:fixed;
      z-index: 111;
background-color:#020202;
transform: translateY(-200%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.menubar{
position: absolute;
right:4%;
top: 40%;
cursor: pointer;
opacity: .8;
transition: all .4s ease;
}
.menubar span{
position: relative;
background-color:transparent;
height:3px;
width: 20px;
display: block;
margin:6px;
border-radius: 20px;
}
.menubar .first-span{
width:35px;
}
.menubar .first-span::before{
content: "";
position: absolute;
height: 120%;
width: 100%;
top:0;
right:0;
background-color: #fff;
transition: all .5s ease;
}
.menubar .second-span{
width:35px;
}
.menubar .second-span::before{
content: "";
position: absolute;
height: 120%;
width: 100%;
top:0;
right:0;
background-color:#fff;
transition: all .3s ease;
}
.menubar .third-span{
width:35px;
}
.menubar .third-span::before{
content: "";
position: absolute;
height: 120%;
width: 100%;
top:0;
right:0;
background-color:#fff;
transition: all .3s ease;
}
.menubar:hover .second-span::before , .menubar:hover .first-span::before , .menubar:hover .third-span::before {
height: 100%;
}
.menubar:hover{
opacity: 1;
}
.close-first , .close-second{
height: 0px;
width: 35px;
background-color: #fff;
display: block;
margin: -2px;
cursor: pointer;
padding: 1px;
border-radius: 20px;
}
.close-first {
transform: rotate(45deg);
}
.close-second{
transform: rotate(-45deg);
}
.navigation-close{
position: absolute;
top: 6%;
right:4%;
padding: 10px;
cursor: pointer;
transition: all.3s ease;
opacity: .8;
}
.navigation-close:hover{
opacity: 1;
transform: rotate(90deg);
}
.logo a{ /* lookitsgraphic lorsque mernu ouvert */
position: absolute;
top: 3%;
left: 2.5%;
opacity: .8;
      z-index: 2;
cursor: pointer;
transition: all .4s ease;
cursor : none;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;
border: 5px solid #fcfcfc;
animation: glitch-middle 3s infinite;
}
.logo a:hover{
opacity: 1;
}
.header_down .logoInit{ /* lookitsgraphic fermé */
position: absolute;
top: 35%;
left: 2.5%;
opacity: .8;
transition: all .4s ease;
cursor : none;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;
border: 5px solid #fcfcfc;
animation: glitch-middle 3s infinite;
}
@keyframes glitch-middle {
0%,26%,30%,72%,76%,100% { transform: translate(0em,0em) skew(0deg) ; box-shadow: none }
30%,70% {transform: translate(0em,0em) skew(30deg);}
29%,31%,69%,71% {transform: translate(0em,0em) skew(0deg);}
28%,74% { box-shadow: 
-0.2em 0.1em 0 0 cyan,
0.2em -0.1em 0 0 magenta
}
}
.header_down .logoInit:hover{
opacity: 1;
}
.social-media-links{
width: 100%;
left: 0;
top: 23px;
position: absolute;
padding: 10px;
height: auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.social-media{
color: white;
width:  30px;
opacity: .8;
margin: 15px;
transition: all .4s ease;
}
.social-media:hover{
opacity: 1;
transform: scale(1.5);
}
.navigation-links{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-family:poppins;
}
.navigation-links a{
padding:10px;
text-decoration: none;
color: white;
font-size: 40px;
opacity: .7;
color: rgba(252, 252, 252, 0);
-webkit-text-stroke: 1px #fcfcfc;
transition: all .4s ease;
}
.navigation-links a:hover{
opacity: 1;
color: rgba(252, 252, 252, 1);
-webkit-text-stroke: 0px;
}
.navigation-links a::before{
content: "";
position: absolute;
top:50%;
left: 50%;
display: flex;
justify-content: center;
transform: translate(-50%,-50%);
align-items: center;
font-size: 9vw;
font-weight: 400;
font-family: monoton;
color:rgb(255, 255, 255,.1);
      z-index: 1;
pointer-events: none;
opacity: 0;
letter-spacing: 100px;
transition: all .4s ease;
}
.navigation-links a:hover::before{
content: attr(data-text);
opacity: 1;
letter-spacing: 10px;
}
/* transition */
#breaker{
height: 300vh;
width: 120%;
background-color: #fff;
opacity: 1;
animation: breakeranimate 1.5s linear;
display: none;
transition: all .4s ease;
      z-index: 10;
transform: rotate(15deg);
position: fixed;
transform : translateY(-100%);
}
@keyframes breakeranimate{
0%{ transform : translateX(-150%) rotate(15deg)  translateY(-50%);}
50%{ transform : translateX(0%) rotate(15deg)  translateY(-50%);}
100%{ transform : translateX(150%) rotate(15deg)  translateY(-50%);}
}
@-webkit-keyframes breakeranimate{
0%{ transform : translateX(-150%) rotate(15deg)  translateY(-50%);}
50%{ transform : translateX(0%) rotate(15deg)  translateY(-50%);}
100%{ transform : translateX(150%) rotate(15deg)  translateY(-50%);}
}
@keyframes scale{
0%{
    transform: scale(.6);
    }
100%{
    transform: scale(1);
    }
}
@-webkit-keyframes breakeranimate{
0%{
    transform: scale(.6);
    }
100%{
transform: scale(1);
    }
}

.html{
display: inline-block;
position: absolute;
left: 5%;
top:30%;
}

    
.cursor{
height: 50px;
width: 50px;
display: block;
border-radius: 50%;
border: 1px solid #fff;
background: #fff;
mix-blend-mode:difference;
pointer-events: none;
position: fixed;
top: -25px;
left: -25px;
z-index: 999;
opacity: 1;
transition:  scale .5s ease;
}
.cursor-small{
height: 50px;
width: 50px;
display: block;
border-radius: 50%;
border: 1px solid #fff;
background: #fff;
pointer-events: none;
position: fixed;
top: -25px;
left: -25px;
      z-index: 999;
opacity: 1;
transition:  scale .4s ease;
}
.icon{
height:40px;
opacity: .8;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
        <div id="all">
                <div class="cursor"></div>
        <!--loader-->
        <!--    <div id="loader">
                <img src="src/img/logo.png"> 
            </div>  -->
        <!--chargement-->
            <div id="breaker"> </div>
            <div id="breaker-two"> </div>
        <!--Navigation- ouverture-->
            <div id="navigation-content">
                <div class="logo">
                    <h1>
                        <a id="name">lookitsgraphic</a>
                    </h1>
                </div>
                <div class="navigation-close">
                    <span class="close-first"></span>
                    <span class="close-second"></span> 
                </div>
                <div class="navigation-links">
                    <a href="javascript:setTimeout(()=>{window.location = 'index.html' },800);"  data-text="HOME" id="home-link" >HOME</a>
                    <a href="javascript:setTimeout(()=>{window.location = 'aboutMe.html' },800);"  data-text="ABOUT" id="about-link" >ABOUT</a>
                    <a href="javascript:setTimeout(()=>{window.location = 'projects.html' },800);" data-text="PROJECTS" id="projects-link" >PROJECTS</a>
                    <a href="javascript:setTimeout(()=>{window.location = 'portfolio.html' },800);" data-text="PORTFOLIO" id="portfolio-link" >PORTFOLIO</a>
                    <a href="javascript:setTimeout(()=>{window.location = 'contact.html' },800);" data-text="CONTACT" id="contact-link" >CONTACT</a>
                </div>
            </div>
         <header class="header_down"> 
        <!--div-->
                <h1><a class="logoInit" alt="logo">lookitsgraphic</a>
                </h1>
                                <div class="social-media-links">
                    <a href="#/" target="_blank">
                        <img src="https://lookitsgraphic.com/src/picto/Instagram.png" class="social-media" alt="instagram-logo">
                    </a>
                    <a href="Tel: #">
                        <img src="https://lookitsgraphic.com/src/picto/Phone.png" class="social-media" alt="phone-logo">
                    </a>
                    <a href="mailto: #" target="_top">
                        <img src="https://lookitsgraphic.com/src/picto/Mail.png" class="social-media" alt="mail-logo">
                    </a>
                    <a href="#">
                        <img src="https://lookitsgraphic.com/src/picto/Eye.png" class="social-media" alt="eye-logo">
                    </a>
                </div>
                <div class="menubar">
                    <span class="first-span"></span>
                    <span class="second-span"></span>
                    <span class="third-span"></span>
                </div>
    <!--Header Fin-->
          </header>
          
         <!--GRILLE-->
         <div class="grille">
           <div class= "espacehaut"> </div>
            <div class="colonne1">

              <a class="playgif" href="test.html">  
                <div class="vignette_verticale">
                  <div class="hover_vignettes_vertical hover_color">
                    <div class="texte_vignette_verticale">
                      <div class="titre_vignette">TEST</div>
                      <div class="informations_vignette"> 
                          lorem ipsum</br>
                         
                      </div>
                    </div> 
                  </div>
                <img data-swap="https://lookitsgraphic.com/src/img/portfolio/vertical_vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vertical_vignette.png">
                </div>
              </a> 


            </div> 

            <div class="colonne2"> 

            <a  class="playgif" href="test.html">
                <div  class="vignette_horizontale">
                  <div  id="anim1" class="hover_vignettes hover_color">
                    <div id="anim1" class="texte_vignette">
                      <div id="anim1" class="titre_vignette">TEST</div>
                      <div  id="anim1" class="informations_vignette">
                          lorem ipsum</br>
                      </div>
                    </div>      
                  </div>
                  <img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">
                  
                </div>
              </a> 

            <a class="playgif" href="test.html">
                <div class="vignette_horizontale">
                  <div class="hover_vignettes hover_color">
                    <div class="texte_vignette">
                      <div class="titre_vignette">TEST</div>
                      <div class="informations_vignette">
                          lorem ipsum</br>
                      </div>
                    </div>      
                  </div>
                <img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">
                </div>
              </a> 
 
 


              
            </div>
            
            <div class="colonne3"> 

               <a class="playgif" href="test.html">
                <div class="vignette_horizontale">
                  <div class="hover_vignettes hover_color">
                    <div class="texte_vignette">
                      <div class="titre_vignette">TEST</div>
                      <div class="informations_vignette">
                          lorem ipsum</br>
                      </div>
                    </div>
                  </div>
                <img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">
                </div>
              </a>  

            <a class="playgif" href="test.html">
                <div class="vignette_horizontale">
                  <div class="hover_vignettes hover_color">
                    <div class="texte_vignette">
                      <div class="titre_vignette">TEST</div>
                      <div class="informations_vignette">
                          lorem ipsum </br>
                      </div>
                    </div>      
                  </div>
                <img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">
                </div>
              </a> 

              
              
            </div>
           </div> 
    <!--ALL Fin-->
            </div>

    <!--Scripts-->
        </div>

    </body>

My Website page with the gif that do not work.

If any one understand where to fix this problem.

Thank you for your consideration in this matter.

Which thing is the gif? When I hover say the top right square item thing, and it goes red, what am I suppose to be looking at? — UnfocusedDrive, Dec 13 '20 at 04:41
@PowerGlove when you hover over each of the "test" images, a red square appears with an opacity and below the gif image is animated. With the snippet, you sometimes have to stay on it for a little while while it loads. — Lookitsgraphic, Dec 13 '20 at 14:22
@Lookitsgraphic If you look at your dev console on your site, you'll see an error for `$ is not defined` You need put your `jquery.js` *before* your `gif.js` - change the order of those scripts and it will most likely work. — disinfor, Dec 13 '20 at 16:30
@disinfor Huge thanks, I looked at the console, and I didn't understand what was imply `$ is not defined`. I change the order of those scripts and all work — Lookitsgraphic, Dec 13 '20 at 16:50

score 1 · Accepted Answer · answered Dec 13 '20 at 16:57

1

As @disinfor say in comments, there was the message $ is not defined in the console. I had to change the order of the scripts jquery.js and gif.js and all work fine.

answered Dec 13 '20 at 16:57

Lookitsgraphic

84
11

Z-index blocks the functioning of the gif animation | Jquery CSS HTML JS

First example :

Second example (Edited):

1 Answers1