多个动画图像CSS下方的标题

Question

我正在尝试在多个动画图标下创建嵌入式字幕。在为图标设置动画之前，我可以通过创建行和列div（在线找到此方法）来创建内嵌字幕。

在为第一个图标设置动画以使其悬停时将其翻转后，标题进入了图标下方，而我正努力解决此问题。下面是我的HTML和CSS代码。随附的图片仅供参考。

HTML和CSS级别：新手。

* {
  box-sizing: border-box;
}

#projects {
  padding-left: 7%;
  padding-right: 7%;
  padding-top: 4%;
}

#projects h3 {
  text-align: center;
  position: relative;
  display: block;
  background: blue;
}

/* creating icon grid */

.column {
  float: left;
  width: 20%;
  padding-bottom: 2%;
  padding-left: 4%;
  padding-right: 4%;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

/* circle flip */

.circle {
  transition: 0.5s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.circle:hover {
  -webkit-transform: rotate3d(0, 90, 0, 180deg);
  transform: rotate3d(0, 90, 0, 180deg);
}

.front, .back {
  border-radius: 50%;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
}

.back {
  -webkit-transform: rotate3d(0, 90, 0, 180deg);
  transform: rotate3d(0, 90, 0, 180deg);
}

.image {
  width: 100%;
}

<section id="projects">
  <div class="row">
    <div class="column">
        <div class="circle">
          <div class="front">
            <img class="image" src="./icons/blueLogo.png" />
          </div>
          <div class="back">
            <a href="#"> <img class="image" src="./icons/blueLogoBack.png"> </a>
          </div>
        </div>
      <h3> caption <h3>
    </div>
    <div class="column">
      <img src="./icons/yellowLogo.png" class="overlay_circle" style="width:100%">
      <h3> caption <h3>
    </div>
    <div class="column">
      <img src="./icons/blueLogo.png" style="width:100%">
      <h3> caption <h3>
    </div>
    <div class="column">
      <img src="./icons/yellowLogo.png" style="width:100%">
      <h3> caption <h3>
    </div>
    <div class="column">
      <img src="./icons/blueLogo.png" style="width:100%">
      <h3> caption <h3>
    </div>
  </div>
</section>

屏幕截图供参考：