Using JQuery Zoom with Bootstrap Carousel

Question

I'm trying to use JQuery Zoom plugin (http://www.jacklmoore.com/zoom/) with the Bootstrap Carousel so that each image in the carousel zooms in at cursor position when hovered however I'm unable to get the zoom working after adding both plugins together, the carousel works fine.

I believe it could be the carousel preventing the hover event reaching the Zoom plugin.

Here is my code for each bootstrap carousel item

<div class="item active">
    <span class='zoom'>
         <img class="img-responsive" src="@Url.Content( Path.Combine( @"~", PathLocations.BrochureImages, page.FileName ) )" alt=" " />
    </span>
</div>

And the JS to initiate the plugins

<script type="text/javascript">
$(function () {
    $('.carousel').carousel({
        interval: 99999,
        pause: false
    });

    $('.zoom').zoom({ on: 'click' });
});

Thank in advanced

--Update--

After a bit more digging I found that the problem lies with the img-responsive part, the zoom span size to 0px, 0px and not fitting to the image size. How might I go about fixing this?

--Solution--

Fixed the problem, simply switch the span to a div

<div class="item active">
    <div class='zoom'>
         <img class="img-responsive" src="@Url.Content( Path.Combine( @"~", PathLocations.BrochureImages, page.FileName ) )" alt=" " />
    </div>
</div>

Answer 1

Fixed the problem, simply switch the span to a div

<div class="item active">
    <div class='zoom'>
         <img class="img-responsive" src="@Url.Content( Path.Combine( @"~", PathLocations.BrochureImages, page.FileName ) )" alt=" " />
    </div>
</div>