JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
			 <img src="https://i.imgur.com/5PffYan.png" width="300" height="300">
                         
		</div>
                 
		<div class="back">
                         <div class="img-group">
			 <img src="https://i.imgur.com/B7Hpm2N.png" width="300" height="300">
                         <div class="img-tip">低壓開關櫃</div> 
                         <div>  
		</div>
	</div>
      </div>

CSS

/*圖片文字*/
i2:hover img {

    transform: scale(1.5);

}
i2 img {

    transition: all 0.5s ease-in-out 0s;

}
.img-group {
  position: relative;
  display: inline-block;
}
        
.img-tip {
  position: absolute;
  bottom: 0;
  background: #333;
  color: #fff;
  opacity: 0.6;
  display: none;
}
        
.img-group:hover .img-tip {
  display: block;
  width: 100%;
  text-align: center;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
}