Fancybox in image container

Question

is possible to set up to load fancybox (I use fancybox 3) to image container? In documentation is it not anything similar, maybe some hack to do it?

I have simple html:

<div id="discount-popup">
  <h2>Discount</h2>
  <form action="" method="POST">
    <label for="email-input">Email</label>
    <input id="email-input" type="email" name="email" value="" required /><br />
    <input type="submit" name="send-discount" value="Send" />
</form>

And jquery to launch it after 5s after load page:

if ($('#discount-popup').length) {
  setTimeout(function () {
    $.fancybox({
      autoSize: false,
      height: 'auto',
      minHeight: 385,
      width: 650,
      href: '/index/discount-popup',
      type: 'iframe'
    });
  }, 5000);
}

Content of popup would be in top of image. Image container could be something like that:

Answer 1

It could be something like this, but it is still unclear what do you ask for:

.fancybox-slide--iframe .fancybox-content {
  width  : 780px;
  height : 460px;
  margin: 0;
  padding: 50px 100px 200px 100px;
  background: transparent url(https://i.stack.imgur.com/eZUaW.jpg) top left no-repeat;
  background-size: cover;
}

https://codepen.io/anon/pen/MqzYWv?editors=1100