Javascript 如何在一组图像中创建单个图像翻转效果t？

我有4个部分-每个部分都有一个图像和一些文本

<div class=container>
 <div class=row>
  <div class="1"> img 1 </div>
  <div class="1"> img 2 </div>
 </div>
 <div class=row>
  <div class="1"> img 3 </div>
  <div class="1"> img 4 </div>
</div>

img 1
img 2
img 3
img 4

我正在尝试图像翻转效果，而且还有很多

当我悬停或触摸（移动）时，我希望图像翻转并显示一些文本

<div class=container>
 <div class=row>
  <div class="1"> img 1 </div>
  <div class="1"> img 2 </div>
 </div>
 <div class=row>
  <div class="1"> img 3 </div>
  <div class="1"> img 4 </div>
</div>

我试图做的是允许系统只允许一个图像与一些文本保持翻转

<div class=container>
 <div class=row>
  <div class="1"> img 1 </div>
  <div class="1"> img 2 </div>
 </div>
 <div class=row>
  <div class="1"> img 3 </div>
  <div class="1"> img 4 </div>
</div>

我想开始（当页面加载时）只有图像1被文本翻转，其他4个是图像。当其中一个悬停/触摸其他图像时，img 1复位-另一个显示文本

有什么模块可以帮我吗？我已经在使用jquery-latest和pure/skeleton-like作为响应图像

编辑1：

我指的是翻转效果

谢谢

首先“干得好！”。我喜欢你的效果

回答你的问题：

要在页面加载时翻转其中一个图像，必须将其与其他图像分开，并使用

背面

作为默认状态。我的意思是，使用不同的类名、id或名称

现在，根据您提供的codepen小提琴，不可能同时翻转多个图像，因为当触发

mouseout

事件时，图像会翻转回其默认状态

要在另一个图像悬停时翻转默认显示文本的图像，请使用以下jQuery脚本：

---

---

编辑： 正如我承诺的，这是你所要求的工作版本；或者基本上我理解你的要求

既然你们已经发现了那个喜欢并想要复制的工作小提琴，我认为试图重新发明轮子是毫无意义的

→ 不过，您必须在CSS中添加一些东西，当然还有一些jQuery：

CSS: 在小提琴的CSS中有一段代码，如下所示，用于在悬停时翻转卡片：

.flip-images .card-wrapper:hover .card {
    transform: rotateY(180deg);
} /* I removed it and as it makes things complicated
  when trying to create the hover effect from jQuery. */

从CSS的角度来看就是这样。

jQuery：

---

检查这个，看看它是如何工作的！