Vertical Carousel with MouseOver Zoom

Question

In my vertical slide show, I want the images to be zoomed out when moving my mouse over. This works, except the fact that the image is in a container with overflow: hidden.

Here's my fiddle: http://jsfiddle.net/Xxahy/129/

The CSS that scales the images:

.cycle-carousel-wrap > img:hover {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5,1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
    box-shadow: 0 0 10px #000;
    -webkit-transform-origin: right top;
    -moz-transform-origin: right top;
    -ms-transform-origin: right top;
    -o-transform-origin: right top;
    transform-origin: right top;
}

And the HTML code for the slideshow:

<script>
    $.fn.cycle.defaults.autoSelector = '.slideshow';
</script>
<div class="slideshow vertical" data-cycle-fx="carousel" data-cycle-timeout="1000" data-cycle-pause-on-hover="true" data-cycle-carousel-visible="3" data-cycle-carousel-vertical="true">        
    <img src="http://lorempixel.com/output/sports-q-c-100-100-1.jpg" />
    <img src="http://lorempixel.com/output/sports-q-c-100-100-2.jpg" />
    <img src="http://lorempixel.com/output/sports-q-c-100-100-3.jpg" />
    <img src="http://lorempixel.com/output/sports-q-c-100-100-5.jpg" />
</div>

Is there a way to show the image above the overflow:hidden container?

Answer 1

As the DIV may not be resized, there is afaik now way to make this with pure css. So I found the solution on my own, check out this fiddle:

http://jsfiddle.net/Xxahy/130/

I create a new image exactly above the existing one (and above the DIV):

$( ".slideshow img" ).hover(
    function() {
        $( ".slideshow" ).cycle("pause");
        if (typeof($img) == 'object') {$img.fadeOut().remove();}
        var $x = $(this).offset().left,
            $y = $(this).offset().top,
            $link = $( this ).parent().attr("data-link");
        $img = $( "<img>" );
        $img.attr( "src", $(this).attr("src"));
        $img.css({ position: "absolute", top: $y, left: $x, display: "none" });
        $( ".slideshow" ).parent().append($img);
        $img.wrap( "<a href=\"" + $link + "\" target=\"_BLANK\" rel=\"nofollow\"></a>").show().addClass( "supersized" ).mouseout( function() { 
            $(this).fadeOut().remove(); 
            $( ".slideshow" ).cycle("resume");
        });
    }
);

That's kind of hack, but it works :-)