Pasar el ratón por encima de la imagen

Abrir en el editor Publica tu código

Recomendado

15 August 2024

<!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

Juego de adivinanzas

Juego de escape

escribiendo en la pantalla

HTML

CSS

JS

Recomendado

Juego de adivinanzas

Juego de escape

escribiendo en la pantalla

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS