[LLIypuk]

Всем привет. На сайте размещен полноэкранный слайдер.
HTML

<div class="slider">
    <div class="slide" style="background-image: url("1.jpg");">
        <p class="content">text</p>
    </div>
    <div class="slide" style="background-image: url("2.jpg");">
        <p class="content">text</p>
    </div>
    <div class="slide" style="background-image: url("3.jpg");">
        <p class="content">text</p>
    </div>
</div>

Далее для слайдера сделал эффект увеличения картинки:
СSS
.slide{
transition:all 4000ms linear;
}
.slide:hover{
transform: scale(1.1);
}

Однако контент внутри слайдера увеличивается вместо с картинкой, а надо сделать так, чтобы увеличивалась исключительно сама картинка. По html-коду понятно, что увеличение контента происходит по причине того, что блок с картинкой является родительским элементом для блока с контентом. Но разместить контент отдельно не получится.

Используемый слайдер http://www.jqueryscript.net/demo/Ful...hoenix-Slider/ Поставил его по причине, что изначально по мне это был полноэкранный слайдер с fade-анимацией и без лишних настроек.