悬停时缩放和裁剪图像

Question

我正在vue-pswipe中使用vue.js中的图库。我添加了一些自定义样式以实现简单的悬停效果，但是我无法裁剪图像，因此悬停时它不会改变大小。我想在悬停时裁剪图像，因此悬停可实现缩放效果而不会裁剪。我试图在图像上方放置一个框，但悬停时无法溢出以隐藏刻度。

这是组件的代码：

<template>
  <div class="containerprojects">
    <Photoswipe>
      <h2>use background-image</h2>
      <div
        class="gallery"
        v-for="(src, index) in imageList"
        :data-pswp-src="src"
        :key="`bg-${index}`"
        :style="getImageItemStyle(src)"
      >
        <div class="onTop">fdsfsdafd</div>
      </div>
    </Photoswipe>

  </div>
</template>

<script>
export default {
  data() {
    return {
      imageList: [
        "https://placeimg.com/640/280/any",
        "https://placeimg.com/640/281/any",
        "https://placeimg.com/640/282/any"
      ]
    };
  },
  methods: {
    getImageItemStyle(src) {
      return {
        width: "300px",
        height: "200px",
        backgroundImage: `url(${src})`,
        backgroundPosition: "center",
        backgroundSize: "cover",
        backgroundRepeat: "no-repeat"
      };
    }
  }
};
</script>

<style lang="scss" scoped>
$scale_hover: 1.05;
$scale: 1;
$time: 300ms;

.gallery {
  cursor: pointer;
  // display: inline-block;
  border: 0;
  position: relative;
  -webkit-transition: all $time ease-in;
  -webkit-transform: scale($scale);
  -ms-transition: all $time ease-in;
  -ms-transform: scale($scale);
  -moz-transition: all $time ease-in;
  -moz-transform: scale($scale);
  transition: all $time ease-in;
  transform: scale($scale);
  overflow: hidden;
}

.gallery:hover {
  // z-index: 2;
  -webkit-transition: all $time ease-in;
  -webkit-transform: scale($scale_hover);
  -ms-transition: all $time ease-in;
  -ms-transform: scale(1$scale_hover);
  -moz-transition: all $time ease-in;
  -moz-transform: scale($scale_hover);
  transition: all $time ease-in;
  transform: scale($scale_hover);
}

.ontop {
  // background-color: rgb(75, 4, 8);
  width: 300px;
  height: 200px;
  max-height: 100%;
  max-width: 100%;
  z-index: 100;
  overflow: hidden;
}

</style>