在猫头鹰旋转木马上悬停翻转图像

Question

我试图让它成为当我将鼠标悬停在猫头鹰旋转木马上的图像上时，它会翻转并且图像背面会有内容。我得到的图像翻转了我想用css的方式，但这样做会在浏览器的x轴上创建一个滚动条。如何在图像悬停时不会有滚动条？

HTML                   

    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
      <div class="flipper">
        <div class="front">
          <img src="img/Rectangle1.png" alt="Owl Image">
        </div>
        <div class="back">
          <p class ="top ">Top</p>
                  <h1 class = "middle">Middle</h1>
                  <p class="bottom">Bottom</p>
                  <img class = "backcolor" src="img/Rectangle2.png" alt="Owl Image">
        </div>
      </div>
    </div>

    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
      <div class="flipper">
        <div class="front">
          <img src="img/Rectangle1.png" alt="Owl Image">
        </div>
        <div class="back">
          <p class ="top ">Top</p>
                  <h1 class = "middle">Middle</h1>
                  <p class="bottom">Bottom</p>
                  <img class = "backcolor" src="img/Rectangle2.png" alt="Owl Image">
        </div>
      </div>
    </div>

    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
      <div class="flipper">
        <div class="front">
          <img src="img/Rectangle1.png" alt="Owl Image">
        </div>
        <div class="back">
          <p class ="top ">Top</p>
                  <h1 class = "middle">Middle</h1>
                  <p class="bottom">Bottom</p>
                  <img class = "backcolor" src="img/Rectangle2.png" alt="Owl Image">
        </div>
      </div>
    </div>

    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
      <div class="flipper">
        <div class="front">
          <img src="img/Rectangle1.png" alt="Owl Image">
        </div>
        <div class="back">
          <p class ="top ">Top</p>
                  <h1 class = "middle">Middle</h1>
                  <p class="bottom">Bottom</p>
                  <img class = "backcolor" src="img/Rectangle2.png" alt="Owl Image">
        </div>
      </div>
    </div>

   </div>
  </div>

CSS

    .backcolor{
    position: absolute;
    z-index: 2;
    top: 0;
}

.top{
    position: absolute;
    top: 5;
    z-index: 10000;
    padding-left: 42%;
}

.middle{
    position: absolute;
    padding-top: 50%;
    z-index: 10000;
    padding-left: 30%;
}

.bottom{
    position: absolute;
    padding-top: 115%;
    z-index: 10000;
    padding-left: 40%;
}

/* entire container, keeps perspective */
.flip-container {
    perspective: 1000;
}
    /* flip the pane when hovered */
    .flip-container:hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }

.flip-container, .front, .back {
    width: 320px;
    height: 480px;
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
}

JS

$("#owl-example").owlCarousel({

      navigation : false, // Show next and prev buttons
      pagination:false,

      // "singleItem:true" is a shortcut for:
       items : 4, 
       autoPlay : 1000,
       stopOnHover: true
      // itemsDesktop : false,
      // itemsDesktopSmall : false,
      // itemsTablet: false,
      // itemsMobile : false

  });