sudo try

Styling:
.card {
  font-family: Meiryo;
  font-size: 20px;
  text-align: center;
  color: black;
  background-color: white;
}

.card1 {
  font-weight: normal;
  color: #027702;
}

.english {
  opacity: 0;
  transition-property: opacity;
  transition: 0.3s ease-in-out;

  color: black;
}

.english:hover {
  opacity: 100;
}

.furigana {
  color: #027702;
}

.Source {
  color:#339922
}
ruby rt { visibility: hidden; } ruby:hover rt { visibility: visible; }
Back:
<div class="back"> </div>
<div style="text-align:center;;position: absolute;top: 0; left: 0; bottom: 0; right: 0;">
<span style=color:black>
<br>
 出所</span>:<span style=color:#339922"> {{Source}}</span>
<br>
<img src="{{Snapshot}}"
<br>
  <div class="furigana" style="text-align: center;font-size: 40px;">
     {{furigana:Furigana}}
  </div>
  <div style='font-size: 22px;text-align: center'>
  {{furigana:Back}}
  </div>
  <div class="english" style='font-size: 20px;text-align: center'>
     {{English}}
</div>
<br>
<div class="english" style='font-size: 20px;text-align: right'>
     {{Morpheme}}
</div>
</div>