Отображение изображения снаружи <div>, где переполнение: скрыто?

Question

Я использую замечательный плагин jCuery jCarouselLite от Ganesh для отображения прокручиваемой серии миниатюрных изображений в верхней части страницы. У контейнера div обязательно переполнение: скрыто, чтобы ограничить количество отображаемых миниатюр за один раз. Я хотел бы отобразить увеличенную версию миниатюры при наведении на нее курсора мыши. Я в основном использую CSS, но я не могу убедить большое изображение отобразить за пределами родительского div из-за настройки переполнения, и оно отображает «обрезано» внутри этого div.

Возможно ли это с помощью CSS?

Answer 1

Невозможно отобразить дочерний элемент за пределами родительского элемента с переполнением: скрытый набор. Лучший способ добиться желаемого эффекта - переместить большие уменьшенные изображения за пределы обрезанного элемента div и показать / скрыть его с помощью JavaScript.

Answer 2

Вы не можете сделать это с помощью css, НО можно добиться с помощью javascript-jquery.

$(function () {
    $(".div").on("mouseover", function () {

        $(this).children(".myimg").show().parents().css({overflow:'visible'});

    }).on("mouseout", function () {

        $(this).children(".myimg").hide().parents().css({overflow:'hidden'});

    });
});

Answer 3

Это не было бы возможно с CSS, если вы не измените размер своего контейнера, но вы можете использовать jQuery, чтобы добавить изображение к телу, а затем расположить и анимировать его поверх эскиза.

Answer 4

Вы должны изменить размер вашего div или переместить изображение за пределы overflow:hidden; div. overflow:hidden всегда будет обрезать содержимое.

Было бы легче помочь, если вы разместили несколько строк своего кода.