Масштабирование и обрезка изображения при наведении - PullRequest
Новая
       14

Масштабирование и обрезка изображения при наведении

0 голосов
/ 07 марта 2019

Я использую 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>
...