MooZoom не масштабирует родительский элемент ⇐ CSS

[Anonymous]

Это мой первый вопрос. Поэтому, пожалуйста, извините за недостающую информацию.
У меня проблема с mooZoom и slick. Вероятно, это проблема, связанная с CSS, но я не смог решить эту проблему.
Проблема в том, что mooZoom не отображается на верхнем уровне. Он ограничен шириной родительского элемента.
Мой код:

Код: Выделить всё

.mooZoom-big-detail {
-moz-box-shadow: 0px 0px 10px #000;
-webkit-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
}

.slider-galeria-thumbs {
float: left;
width: 16%;
}

.slider-galeria {
float: left;
width: 84%;
}

.slider-galeria div,
.slider-galeria-thumbs div {
outline: 0;
}

.slider-galeria span {
display: block;
height: 613px;
width: 460px;
background: #000;
color: #3498db;
font-size: 36px;
line-height: 613px;
margin: 0 10px 0 10px;
padding: 2%;
text-align: center;
}

.slider-galeria-thumbs span {
display: block;
margin-bottom: 5px;
height: 80px;
width: 106px;
background: #3498db;
color: #000;
font-size: 14px;
line-height: 80px;
text-align: center;
}

.slider-galeria-thumbs .slick-current span {
background: #000;
color: #3498db;
}

.slick-prev {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 40px;
text-indent: -9999px;
background: transparent;
border: 0;
z-index: 1000;
outline: 0;
}

.slick-prev:before {
content: "";
color: #fff;
font-size: 60px;
line-height: 0;
text-indent: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Пожалуйста, взгляните на проблему. На слайде 1 есть изображение. Наведите на него курсор, чтобы увидеть, в чем проблема;
Ссылка: https://jsfiddle.net/sonmezcem/5de29sxk/16/
Спасибо
Я пробовал экспериментировать с z-index, менять порядок файлов CSS и т. д., чтобы масштабирование работало на верхнем уровне.>

Подробнее здесь: https://stackoverflow.com/questions/785 ... nt-element