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

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
– UnfocusedDrive, Commented Dec 13, 2020 at 4: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
– Lookitsgraphic, Commented Dec 13, 2020 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
– disinfor, Commented Dec 13, 2020 at 16:30

Lookitsgraphic · Accepted Answer · 2020-12-13 16:57:11Z

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, 2020 at 16:57

Lookitsgraphic

8411 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

First example :

Second example (Edited):

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

First example :

Second example (Edited):

1 Answer 1

Comments

Linked

Related