JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>
<svg height="500" width="1000">
  <defs>
    <mask id="cut-off-bottom" x="0" y="0" width="1000" height="500">
        <rect x="0" y="0" width="1000" height="500" fill="white"/>
        <text x="10" y="330" font-size="300" font-weight="bold">700 000</text>
    </mask>
    <mask id="cut-off-bottom-2" x="0" y="0" width="1000" height="500">
        <text x="10" y="330" font-size="300" font-weight="bold" fill="white">700 000</text>
    </mask>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255);" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);" />
    </radialGradient>
  </defs>
  <rect x="0" y="0" width="1000" height="500" mask="url(#cut-off-bottom)" fill="url(#grad1)" />
    <image x="30" y="130" width="50" height="50" xlink:href="//placehold.it/50"/>
</svg>

CSS

* {
    margin: 0;
    padding: 0;
}
image {
      transform: scale(1);
    transform-origin: 50% 50%;
     mask: url(#cut-off-bottom-2);
}
image:hover {
      transform: scale(2);
     mask: none;
}