Текст поверх изображения Fancybox

Question

Я использую Fancybox3 для отображения некоторых изображений и хочу разместить текст поверх изображения. Это работает, когда я редактирую файл JavaScript с этим:

тестовое задание

С этим у меня есть текст на фактическом изображении. Но этот текст становится большим, когда Fancybox увеличивает и уменьшает изображение. Почему это происходит, и есть ли способ решить это?

Я хочу, чтобы изображение просто загружалось с картинки вместо картинки.

Answer 1

Ты можешь использовать .fancybox-is-scaling имя класса, чтобы скрыть текст во время увеличения изображения, аналогично этой демонстрации - https://codepen.io/fancyapps/pen/ePYNZo.

Скрипт использует CSS transform: scale() для масштабирования, чтобы улучшить производительность, но побочным эффектом является то, что все масштабируется в пределах контейнера.