<div class='lights_container'>
  <main>
    <div class='items'>
      <div class='item'>
        <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
          <defs>
            <clipPath id='clip-0'>
              <circle cx='0' cy='0' fill='#000' r='150px'></circle>
            </clipPath>
          </defs>
          <text class='svg-text' dy='.3em' x='50%' y='50%'>
            אשכולות
          </text>
          <g clip-path='url(#clip-0)'>
            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='https://appupgo.co.il/wp-content/uploads/2022/12/‏‏לכידה.png'></image>
          </g>
        </svg>
      </div>
      <div class='item'>
        <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
          <defs>
            <clipPath id='clip-1'>
              <circle cx='0' cy='0' fill='#000' r='150px'></circle>
            </clipPath>
          </defs>
          <text class='svg-text' dy='.3em' x='50%' y='50%'>
            למדם
          </text>
          <g clip-path='url(#clip-1)'>
            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='https://appupgo.co.il/wp-content/uploads/2022/12/‏‏לכידה-1.png'></image>
          </g>
        </svg>
      </div>
      <div class='item'>
        <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
          <defs>
            <clipPath id='clip-2'>
              <circle cx='0' cy='0' fill='#000' r='150px'></circle>
            </clipPath>
          </defs>
          <text class='svg-text' dy='.3em' x='50%' y='50%'>
            קופודיל
          </text>
          <g clip-path='url(#clip-2)'>
            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='https://appupgo.co.il/wp-content/uploads/2022/12/‏‏לכידה-2.png'></image>
          </g>
        </svg>
      </div>
      <div class='item'>
        <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
          <defs>
            <clipPath id='clip-3'>
              <circle cx='0' cy='0' fill='#000' r='150px'></circle>
            </clipPath>
          </defs>
          <text class='svg-text' dy='.3em' x='50%' y='50%'>
            פסיפס
          </text>
          <g clip-path='url(#clip-3)'>
            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='https://appupgo.co.il/wp-content/uploads/2022/12/‏‏לכידה-5.png'></image>
          </g>
        </svg>
      </div>
      <div class='item'>
        <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
          <defs>
            <clipPath id='clip-4'>
              <circle cx='0' cy='0' fill='#000' r='150px'></circle>
            </clipPath>
          </defs>
          <text class='svg-text' dy='.3em' x='50%' y='50%'>
            PICK A DROSHO
          </text>
          <g clip-path='url(#clip-4)'>
            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='https://appupgo.co.il/wp-content/uploads/2022/12/‏‏לכידה-4.png'></image>
          </g>
        </svg>
      </div>
      <div class='item'>
        <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
          <defs>
            <clipPath id='clip-5'>
              <circle cx='0' cy='0' fill='#000' r='150px'></circle>
            </clipPath>
          </defs>
          <text class='svg-text' dy='.3em' x='50%' y='50%'>
            חילוקא
          </text>
          <g clip-path='url(#clip-5)'>
            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='https://appupgo.co.il/wp-content/uploads/2022/12/‏‏לכידה-6.png'></image>
          </g>
        </svg>
      </div>
      <div class='item'>
        <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
          <defs>
            <clipPath id='clip-6'>
              <circle cx='0' cy='0' fill='#000' r='150px'></circle>
            </clipPath>
          </defs>
          <text class='svg-text' dy='.3em' x='50%' y='50%'>
            Heart of Marriage
          </text>
          <g clip-path='url(#clip-6)'>
            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='https://appupgo.co.il/wp-content/uploads/2022/12/‏‏לכידה-7.png'></image>
          </g>
        </svg>
      </div>
      <div class='item'>
        <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
          <defs>
            <clipPath id='clip-7'>
              <circle cx='0' cy='0' fill='#000' r='150px'></circle>
            </clipPath>
          </defs>
          <text class='svg-text' dy='.3em' x='50%' y='50%'>
            אסתר מילר
          </text>
          <g clip-path='url(#clip-7)'>
            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='https://appupgo.co.il/wp-content/uploads/2022/12/‏‏לכידה-8.png'></image>
          </g>
        </svg>
      </div>
      <div class='item'>
        <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
          <defs>
            <clipPath id='clip-8'>
              <circle cx='0' cy='0' fill='#000' r='150px'></circle>
            </clipPath>
          </defs>
          <text class='svg-text' dy='.3em' x='50%' y='50%'>
            פנורמה
          </text>
          <g clip-path='url(#clip-8)'>
            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='https://appupgo.co.il/wp-content/uploads/2022/12/‏‏לכידה-9.png'></image>
          </g>
        </svg>
      </div>
      <div class='item'>
        <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
          <defs>
            <clipPath id='clip-9'>
              <circle cx='0' cy='0' fill='#000' r='150px'></circle>
            </clipPath>
          </defs>
          <text class='svg-text' dy='.3em' x='50%' y='50%'>
            אתגר וחוויה
          </text>
          <g clip-path='url(#clip-9)'>
            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='https://appupgo.co.il/wp-content/uploads/2022/12/‏‏לכידה-10.png'></image>
          </g>
        </svg>
      </div>
      <div class='item'>
        <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
          <defs>
            <clipPath id='clip-10'>
              <circle cx='0' cy='0' fill='#000' r='150px'></circle>
            </clipPath>
          </defs>
          <text class='svg-text' dy='.3em' x='50%' y='50%'>
            אמון הציבור
          </text>
          <g clip-path='url(#clip-10)'>
            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='https://appupgo.co.il/wp-content/uploads/2022/12/‏‏לכידה-11.png'></image>
          </g>
        </svg>
      </div>
      <div class='item'>
        <svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
          <defs>
            <clipPath id='clip-11'>
              <circle cx='0' cy='0' fill='#000' r='150px'></circle>
            </clipPath>
          </defs>
          <text class='svg-text' dy='.3em' x='50%' y='50%'>
            לוח חם
          </text>
          <g clip-path='url(#clip-11)'>
            <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='https://appupgo.co.il/wp-content/uploads/2022/12/‏‏לכידה-12.png'></image>
          </g>
        </svg>
      </div>
    </div>
  </main>
</div>
<script>
var items = []
  , point = document.querySelector('svg').createSVGPoint();

function getCoordinates(e, svg) {
  point.x = e.clientX;
  point.y = e.clientY;
  return point.matrixTransform(svg.getScreenCTM().inverse());
}

function Item(config) {
  Object.keys(config).forEach(function (item) {
    this[item] = config[item];
  }, this);
  this.el.addEventListener('mousemove', this.mouseMoveHandler.bind(this));
  this.el.addEventListener('touchmove', this.touchMoveHandler.bind(this));
}

Item.prototype = {
  update: function update(c) {
    this.clip.setAttribute('cx', c.x);
    this.clip.setAttribute('cy', c.y);
  },
  mouseMoveHandler: function mouseMoveHandler(e) {
    this.update(getCoordinates(e, this.svg));
  },
  touchMoveHandler: function touchMoveHandler(e) {
    e.preventDefault();
    var touch = e.targetTouches[0];
    if (touch) return this.update(getCoordinates(touch, this.svg));
  }
};

[].slice.call(document.querySelectorAll('.item'), 0).forEach(function (item, index) {
  items.push(new Item({
    el: item,
    svg: item.querySelector('svg'),
    clip: document.querySelector('#clip-'+index+' circle'),
  }));
});
</script>
<style>
svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

circle {
  transform-origin: 50% 50%;
  transform: scale(0);
  transition: transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.svg-text {
  fill: white;
  text-anchor: middle;
  font-size: 25px;
}

image {
  transform: scale(1.1);
  transform-origin: 50% 50%;
  transition: transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.items {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.item {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 150px;
  margin: 5px;
  cursor: pointer;
  background-color: #3b3e46;
  border-radius: 2px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.02), inset 0 0px 0px 1px rgba(0, 0, 0, 0.07);
  transform: translateZ(0);
}

.item:hover circle,
.item:hover image {
  transform: scale(1);
}
</style>