I have just started to learn about coding in school, and I'm trying to make a simple project.
I have created a flip card consisting of the Finnish flag and an image. The problem is that when I hover over the flag and it flips, half the picture doesn't show.

```css
.wallpaper {
  background: green;
  height: 2000px;
  width: 1920px;
  position: absolute;
}

.flag {
  height: 310px;
  width: 550px;
  background: white;
  position: relative;
}

.horizontal {
  position: relative;
  background: rgba(0, 54, 128, 255);
  height: 75px;
  top: 40%;
}

.vertical {
  position: relative;
  top: -75px;
  bottom: 0;
  left: -75px;
  right: 0;
  margin: auto;
  background: rgba(0, 54, 128, 255);
  height: 310px;
  width: 75px;
}

.vodka {
  height: 200px;
  width: 200px;
}

img {
  position: relative;
  top: 900px;
  bottom: 0;
  left: 525px;
  right: 0;
  width: 350px;
  height: 250px;
}

.text {
  position: absolute;
  left: 450px;
  top: 100px;
}

.mannen {
  color: white;
  position: relative;
  top: 200px;
  left: 75px;
}

.myten {
  color: rgba(0, 54, 128, 255);
  position: relative;
  top: 200px;
  left: 200px;
}

.legenden {
  color: white;
  position: relative;
  left: 300px;
  top: 200px;
}

.container {
  background: rgba(0, 54, 128, 255);
  position: fixed;
  height: 100px;
  width: 1920px;
  top: 0;
}

.mikko {
  color: white;
  position: relative;
  left: 800px;
}

.group {
  position: relative;
  left: 250px;
}

.flip-card {
  background: transparent;
  width: 550px;
  height: 310px;
  perspective: 1000px;
  position: absolute;
  top: 500px;
  left: 450px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.image {
  position: relative;
  top: -900px;
  left: 525px;
  transform: scale(-1, 1);
  z-index: -1;
}
```

```html
<div class="wallpaper">
  <div class="group">
    <div class="text">
      <h1 style="font-family: Verdana">
        <div class="mannen">Mannen,</div>
        <div class="myten">myten,</div>
        <div class="legenden">legenden!</div>
      </h1>
    </div>
    <div class="vodka">
      <img src="https://folkofolk.se/sites/default/files/styles/article_large/public/2016-02/Finlandia_0.jpg.jpeg?itok=2vkru5VU" />
    </div>
    <div class="flip-card">
      <div class="flip-card-inner">
        <div class="flip-card-front">
          <div class="flag">
            <div class="horizontal"></div>
            <div class="vertical"></div>
          </div>
        </div>
        <div="flip-card-back">
          <div class="image">
            <img src="https://primatelounge.se/wp-content/uploads/2017/03/mikko-tahtinen-500x748.jpg" style="width:550px;height:310px;" />
          </div>
      </div>
    </div>
  </div>
</div>
<div class="container">
  <div class="mikko">
    <h1 style="font-family: Verdana">Mikko Tähtinen</h1>
  </div>
</div>
</div>
```