Pasar el ratón por encima de la imagen

1643 ledoc

Abrir en el editor Publica tu código

Recomendado

2 June 2025

Un código de youssefdahroug2005

4 December 2025

Entre nosotros

1 October 2025

Plantilla HTML de portafolio personal

HTML

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

Entre nosotros

Plantilla HTML de portafolio personal

HTML

CSS

JS

Recomendado

Un código de youssefdahroug2005

Entre nosotros

Plantilla HTML de portafolio personal

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS