Pasar el ratón por encima de la imagen

Abrir en el editor Video Publica tu código

Recomendado

16 February 2025

Estructura HTML de la animación de carga CSS

4 May 2025

<!DOCTYPE>
<html 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>flip-image</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<style>

.flip-container {
 perspective: 1000;
}

.flip-container:hover .flipper, .flip-container.hover .flipper {
 transform: rotateY(180deg);
}
.flip-container, .front, .back {
 width: 320px;
 height: 252px;
 float:left;
}

.flipper {
 transition: 0.6s;
 transform-style: preserve-3d;
 position: relative;
}

.front, .back {
 backface-visibility: hidden;
 position: absolute;
 top: 0;
 left: 0;
}

.front {
 z-index: 2;
 /* for firefox 31 */
 transform: rotateY(0deg);
}
.myimg {
 width:200px;
 height:200px;
}
.myimg img {
 width:100%;
 margin:auto;
}
.wrapper {
 padding:20px;
 margin:auto;
 background:#666666;
 overflow:auto;
}
.container {
 margin:auto;
 padding:10px;
 background:#999999;
 overflow:auto;
}

.back {
 transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="wrapper">
  
  <div class="container">
    
    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
     
      <div class="flipper">
        
        <div class="front">
         
          <img class="myimg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRz_oKTavtwqYDaiKbeBmcCmaKYcwsmGxE-UcYPgLKP81MRgQ3HGIhWXJ8MTd0s6sAp1dU&usqp=CAU"> </div>
        
        <div class="back">
          
          <img class="myimg" src="https://i.pinimg.com/736x/7a/35/39/7a35391475b5f9cdba0e33e4e6715692.jpg"> </div>
        
      </div>
      
    </div>
   
    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
      
      <div class="flipper">
      
        <div class="front">
          
          <img class="myimg" src="https://i.pinimg.com/originals/7a/e0/9c/7ae09c5fdc7af8debb6adadced49b412.jpg"> </div>
        
        <div class="back">
         
          <img class="myimg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRt26D5EJlIzUYvnG1x6kfxiPgQ19_naAVJgzM1mvUakzJu2d8tO9nSTpNcyhC7Ncqc-Nw&usqp=CAU"> </div>
       
      </div>
      
    </div>
  
    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
     
      <div class="flipper">
       
        <div class="front">
          
          <img class="myimg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRduEbAhiF2jwtqHKYxOMwc6SaezzLoPOyjdySQDJGy9X-V5zzta3GBZINDQYYrhvKPGEg&usqp=CAU"> </div>
        
        <div class="back">
         
          <img class="myimg" src="https://pics.craiyon.com/2023-11-07/381557f8effd4b64902860b1d3d1e782.webp"> </div>
      </div>
      </div>
      </div>
  </div>
</body>
</html>

Pasar el ratón por encima de la imagen

Recomendado

Un código de NotYoEA

Estructura HTML de la animación de carga CSS

Un código de Mete

HTML

CSS

JS

Recomendado

Un código de NotYoEA

Estructura HTML de la animación de carga CSS

Un código de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS