Mobile flip card version

Good Afternoon,

I created a version of a section to appear only in the small screen version, a flip card, but when opened on mobile, the animation does not appear, and it becomes static. Could someone give me a help?

/*  Responsive */


.horizontal {
    display: block;
}
.vertical {
    display: none;
}
@media (max-width:992px) {
    .horizontal {
        display: none;!important; 
    }
    .vertical {
        display: block;
    }
}

/* ==============================
   Flip Card
   ============================== */
/* continua a declaração de perspectiva para o container geral */
.flip-container { 
perspective: 1000; 
transform-style: preserve-3d; 
}  	

/*  MODIFICADO! vira os containers frente e verso quando o mouse passa em cima */
.flip-container:hover .back { transform: rotateY(0deg); }  	
.flip-container:hover .front { transform: rotateY(180deg); }    
.flip-container, .front, .back { 
  width: 320px;  
  height: 330px; 
}    

/* define a velocidade da animação */
.flipper {  	
  transition: 0.6s;  	
  transform-style: preserve-3d;    	
  position: relative;  
}    

/* esconde o verso durante a animação */
.front, .back { 
backface-visibility: hidden;  	
transition: 0.6s;  	
transform-style: preserve-3d;    	
position: absolute;  	
top: 0;  	
left: 0;  
}    

/*  MODIFICADO! frente posicionada sobre o fundo */
.front {  	
z-index: 2;  	
transform: rotateY(0deg);  
}    

/* verso inicialmente escondido *
.back { transform: rotateY(-180deg); }    

/* modificações para flip vertical   */
.vertical.flip-container { position: relative; }    	
.vertical .back { transform: rotateX(180deg); }    	
.vertical.flip-container:hover .back { transform: rotateX(0deg); }    	
.vertical.flip-container:hover .front { transform: rotateX(180deg);}
   <!DOCTYPE html>
<html>
    <head>
        <title></title>
         <meta name="description" content="">
        <meta name="keywords" content="">
        <meta charset="utf-8">
        <meta name="author" content="">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Favicons -->
        <link rel="shortcut icon" href="images/favicon.png">

        <!-- CSS -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/animate.min.css">
        <link rel="stylesheet" href="css/vertical-rhythm.min.css">
        <link rel="stylesheet" href="css/owl.carousel.css">
        <link rel="stylesheet" href="css/font.awesome.min.css">
        <link rel="stylesheet" href="css/owl.transitions.css">
        <link rel="stylesheet" href="css/simpletextrotator.css">
        <link rel="stylesheet" href="css/magnific-popup.css">
        <link rel="stylesheet" href="css/style-responsive.css">
        
         <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    	 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


    </head>
    <body class="appear-animate">
                        <div class="vertical">
                    <div class="row multi-columns-row alt-features-grid align-center ">
                        
                        <!-- Flip Item -->
                        <div class="col-sm-4 col-md-4 col-lg-4 mb-sm-30 wow fadeInLeft">
                         <div class="team-item align-center">
                            <div class="flip-container" ontouchstart="this.classList.toggle('hover');">  	
  				<div class="flipper">  	
  					<!-- Conteúdo da frente -->  	
   					 <div class="front">  	
      					<img src="images/tecnologia/conquista.png" alt="conquista" class="align-center">
    						</div>
    						<!-- Conteúdo do verso -->  
							    <div class="back">
							    <img src="images/tecnologia/versoconquista.png" alt="conquista">
							    </div></div></div>
						
                          <!-- End Flip Item -->
				<br>
                          <!-- Flip Item -->
                         <div class="row multi-columns-row alt-features-grid align-center ">
                       <div class="col-sm-4 col-md-4 col-lg-4 mb-sm-30 wow fadeInLeft">
                      
                               <div class="flip-container" ontouchstart="this.classList.toggle('hover');">  	
  				<div class="flipper">  	
  					<!-- Conteúdo da frente -->  	
   					 <div class="front">  
      					<img src="images/tecnologia/ativacao.png" alt="conquista" class="align-center">
    						</div>
							   <!-- Conteúdo do verso -->  
							    <div class="back">
							    <img src="images/tecnologia/versoativacao.png" alt="ativacao">
						</div></div></div>
							
                        
                        <!-- End Team Item -->
                      
                     <br>
                        <!-- Team Item -->
                          <div class="row multi-columns-row alt-features-grid align-center ">
                       <div class="col-sm-4 col-md-4 col-lg-4 mb-sm-30 wow fadeInLeft">
                     
                         <div class="flip-container" ontouchstart="this.classList.toggle('hover');">  	
  				<div class="flipper">  	
  					<!-- Conteúdo da frente -->  	
   					 <div class="front">  	
      					<img src="images/tecnologia/rentabilizacao.png" alt="conquista" class="align-center">
    						</div>
							     <!-- Conteúdo do verso -->  
							    <div class="back">
							    <img src="images/tecnologia/versorentabilizacao.png" alt="ativacao">
					</div></div></div>
                        
                        <!-- End Team Item -->
                      
                      <br>
                     <!-- Flip Item -->
                        <div class="row multi-columns-row alt-features-grid align-center ">
                       <div class="col-sm-4 col-md-4 col-lg-4 mb-sm-30 wow fadeInLeft">
                      
                            <div class="flip-container" ontouchstart="this.classList.toggle('hover');">  	
  				<div class="flipper">  	
  					<!-- Conteúdo da frente -->  	
   					 <div class="front">  	
      					<img src="images/tecnologia/retencao.png" alt="conquista" class="align-center">
    						</div>
							    <!-- Conteúdo do verso -->  
							    <div class="back">
							    <img src="images/tecnologia/versoretencao.png" alt="ativacao">
						</div></div></div>
                        
                        <!-- End Team Item -->
  			<br>
  			  <!-- Flip Item -->
                           <div class="row multi-columns-row alt-features-grid align-center ">
                       <div class="col-sm-4 col-md-4 col-lg-4 mb-sm-30 wow fadeInLeft">
                     
                               <div class="flip-container" ontouchstart="this.classList.toggle('hover');">  	
  				<div class="flipper">  	
  					<!-- Conteúdo da frente -->  
      					<img src="images/tecnologia/recuperacao.png" alt="conquista" class="align-center">
    						</div>
							    <!-- Conteúdo do verso -->  
							    <div class="back">
							    <img src="images/tecnologia/versorecuperacao.png" alt="ativacao">
							     
							    </div>
							  </div>
							</div>
							
                        
                        <!-- End Team Item -->
   </body>
</html>
Author: Cris Credie, 2019-01-14
Source

1 answers

Your problem is that you made your CSS the styles in :hover. Put in JS vc is doing a toggle with Class .hover. Vc is confused the balls probably pq used a class with the same name as the pseudo-class...

insert the description of the image here

Notice that it is a method of "activating"(toggle) the Class (classList) on click (onclick) and not an event of hover 

`onclick="this.classList.toggle('hover');"` <-- aqui 'hover' é o nome da classe

For example, to fix it, it is enough that in CSS vc replace where is :hover with .hover. For it is to work with the class .hover.

Change from:

.vertical.flip-container:hover .back

For:

.vertical.flip-container.hover .back

See how the whole code would look fixed.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
         <meta name="description" content="">
        <meta name="keywords" content="">
        <meta charset="utf-8">
        <meta name="author" content="">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Favicons -->
        <link rel="shortcut icon" href="images/favicon.png">

        <!-- CSS -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/animate.min.css">
        <link rel="stylesheet" href="css/vertical-rhythm.min.css">
        <link rel="stylesheet" href="css/owl.carousel.css">
        <link rel="stylesheet" href="css/font.awesome.min.css">
        <link rel="stylesheet" href="css/owl.transitions.css">
        <link rel="stylesheet" href="css/simpletextrotator.css">
        <link rel="stylesheet" href="css/magnific-popup.css">
        <link rel="stylesheet" href="css/style-responsive.css">
        
         <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    	 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>
/*  Responsive */


.horizontal {
    display: block;
}
.vertical {
    display: none;
}
@media (max-width:992px) {
    .horizontal {
        display: none !important; 
    }
    .vertical {
        display: block;
    }
}

/* ==============================
   Flip Card
   ============================== */
/* continua a declaração de perspectiva para o container geral */
.flip-container { 
perspective: 1000; 
transform-style: preserve-3d; 
}  	

/*  MODIFICADO! vira os containers frente e verso quando o mouse passa em cima */
.flip-container.hover .back { transform: rotateY(0deg); }  	
.flip-container.hover .front { transform: rotateY(180deg); }    
.flip-container, .front, .back { 
  width: 320px;  
  height: 330px; 
}    

/* define a velocidade da animação */
.flipper {  	
  transition: 0.6s;  	
  transform-style: preserve-3d;    	
  position: relative;  
}    

/* esconde o verso durante a animação */
.front, .back { 
backface-visibility: hidden;  	
transition: 0.6s;  	
transform-style: preserve-3d;    	
position: absolute;  	
top: 0;  	
left: 0;  
}    

/*  MODIFICADO! frente posicionada sobre o fundo */
.front {  	
z-index: 2;  	
transform: rotateY(0deg);  
}    

/* verso inicialmente escondido *
.back { transform: rotateY(-180deg); }    

/* modificações para flip vertical   */
.vertical.flip-container { position: relative; }    	
.vertical .back { transform: rotateX(180deg); }    	
.vertical.flip-container.hover .back { transform: rotateX(0deg); }    	
.vertical.flip-container.hover .front { transform: rotateX(180deg);}
</style>
    </head>
    <body class="appear-animate">
                        <div class="vertical">
                    <div class="row multi-columns-row alt-features-grid align-center ">
                        
                        <!-- Flip Item -->
                        <div class="col-sm-4 col-md-4 col-lg-4 mb-sm-30 wow fadeInLeft">
                         <div class="team-item align-center">
                            <div class="flip-container" onclick="this.classList.toggle('hover');">  	
  				<div class="flipper">  	
  					<!-- Conteúdo da frente -->  	
   					 <div class="front">  	
      					<img src="https://placecage.com/100/100" alt="conquista" class="align-center">
    						</div>
    						<!-- Conteúdo do verso -->  
							    <div class="back">
							    <img src="https://placecage.com/101/100" alt="conquista">
							    </div></div></div>
						
                          <!-- End Flip Item -->
				<br>
                          <!-- Flip Item -->
                         <div class="row multi-columns-row alt-features-grid align-center ">
                       <div class="col-sm-4 col-md-4 col-lg-4 mb-sm-30 wow fadeInLeft">
                      
                               <div class="flip-container" ontouchstart="this.classList.toggle('hover');">  	
  				<div class="flipper">  	
  					<!-- Conteúdo da frente -->  	
   					 <div class="front">  
      					<img src="https://placecage.com/100/100" alt="conquista" class="align-center">
    						</div>
							   <!-- Conteúdo do verso -->  
							    <div class="back">
							    <img src="https://placecage.com/101/100" alt="ativacao">
						</div></div></div>
							
                        
                        <!-- End Team Item -->
                      
                     <br>
                        <!-- Team Item -->
                          <div class="row multi-columns-row alt-features-grid align-center ">
                       <div class="col-sm-4 col-md-4 col-lg-4 mb-sm-30 wow fadeInLeft">
                     
                         <div class="flip-container" ontouchstart="this.classList.toggle('hover');">  	
  				<div class="flipper">  	
  					<!-- Conteúdo da frente -->  	
   					 <div class="front">  	
      					<img src="https://placecage.com/101/100" alt="conquista" class="align-center">
    						</div>
							     <!-- Conteúdo do verso -->  
							    <div class="back">
							    <img src="https://placecage.com/100/100" alt="ativacao">
					</div></div></div>
                        
                        <!-- End Team Item -->
                      
                      <br>
                     <!-- Flip Item -->
                        <div class="row multi-columns-row alt-features-grid align-center ">
                       <div class="col-sm-4 col-md-4 col-lg-4 mb-sm-30 wow fadeInLeft">
                      
                            <div class="flip-container" ontouchstart="this.classList.toggle('hover');">  	
  				<div class="flipper">  	
  					<!-- Conteúdo da frente -->  	
   					 <div class="front">  	
      					<img src="https://placecage.com/100/100" alt="conquista" class="align-center">
    						</div>
							    <!-- Conteúdo do verso -->  
							    <div class="back">
							    <img src="https://placecage.com/101/100" alt="ativacao">
						</div></div></div>
                        
                        <!-- End Team Item -->
  			<br>
  			  <!-- Flip Item -->
                           <div class="row multi-columns-row alt-features-grid align-center ">
                       <div class="col-sm-4 col-md-4 col-lg-4 mb-sm-30 wow fadeInLeft">
                     
                               <div class="flip-container" ontouchstart="this.classList.toggle('hover');">  	
  				<div class="flipper">  	
  					<!-- Conteúdo da frente -->  
      					<img src="images/tecnologia/recuperacao.png" alt="conquista" class="align-center">
    						</div>
							    <!-- Conteúdo do verso -->  
							    <div class="back">
							    <img src="images/tecnologia/versorecuperacao.png" alt="ativacao">
							     
							    </div>
							  </div>
							</div>
							
                        </div></div></div></div></div></div></div></div></div></div></div>
                        <!-- End Team Item -->
   </body>
</html>
 0
Author: hugocsl, 2019-01-14 17:55:08