Изображение внутри рамки iframe изменено

Question

Я попытался уменьшить размер изображения внутри фрейма, который есть на моем веб-сайте, с помощью этого css класса:

@media screen and (max-widht: 1000px) {
    .class-name {
        transform: scale(0.5);
        transform-origin: 0 0;
        width: 195%;
    }
}

Единственная проблема заключается в том, что он покрывает мою навигацию.

Я использую навигацию из этого видео на YouTube: https://www.youtube.com/watch?v=gXkqy0b4M5g

Проблема может заключаться в том, что позиция iframe попадает при масштабировании, потому что когда это не так, проблема не в этом; однако, когда я пытаюсь сделать следующее:

position: static;

... css ничего не делает.

---

Изображения

nav бар закрыт

панель навигации открыта

Answer 1

Навигационный контент можно наложить на изображения, применив position: relative; и z-index: 1; к навигационному контенту:

.navigation-content {
    ...
    position: relative;
    z-index: 1;
    ...
}