I’m using <iframe/> to show live preview of my cards.

For preview image I need to show only specific part of iframe.

So for example in card-footer I need to show and zoom div on iframe which has id=”card-footer”, no other part of iframe should be visible for preview of card footer.

Anyone that has idea how to show and zoom on specific inside iframe to solve this problem would be appreciated.

I tried with this approach

   <iframe
            src={`${url}#${myInternald}`}
            style={{
              width: preview.width,
              height: preview.height,
              transform: `translate(-50%, -50%) scale(${1 / preview.scale}`,
            }}
           
          />

but this is just scrolling into specific div, still all others are visible.

I’m using React js in project.