html - 翻转图像上的文本 CSS

Question

我一直在自学一些关于 Jscript 和 CSS 玩这个卡片内存游戏的代码:
https://marina-ferreira.github.io/projects/js/memory-game/

我在这里的 codeopen 中有:
https://codepen.io/jaimesoza/pen/xxwJBde

出于显而易见的原因，我只想在翻转版本中添加一些文字(卡片的名称)。我见过一些这样做的例子，但我无法将它们应用于当前的 CSS，因为我在这些问题上完全是个菜鸟。每次我尝试类似的东西 this我最终搞砸了一切。

CSS
    .bottom-right {
      position: absolute;
      bottom: 8px;
      right: 16px;
    }

HTML

  <img src="Dog.jpg" alt="Dog" style="width:100%;">
   <div class="bottom-right">Dog</div>

我认为对于有 css 经验的人来说这很简单，请帮忙!

Answer 1

通过对代码进行一些更改，您将获得所需的输出。

先把你的全部 class="正面" div 中的图像，如下所示。

<div class="front-face" >
<img style = "width: 100%; height:100%; "src="https://i.pinimg.com/originals/7f/24/d8/7f24d81c34fc9ed92e5d1a71c1969d36.png" alt="Dog"/>
        <div class="bottom-right">Dog</div>
       </div>

然后更改以下样式表如下。

.front-face,
.back-face {
  width: 100%;
  height: 100%;
  padding: 23px; // This value is only changed
  position: absolute;
  border-radius: 5px;
  background: #1C7CCC;
  backface-visibility: hidden;
}

然后在样式表中添加新类 CSS

.bottom-right {
      position: fixed;
      text-align: center;
      display: block;
      bottom: 3px;
      color: white;
      left:60px
    }

你会得到这样的东西