Responsive Boostrap3 image swap rollover

Question

i am trying to make a responsive rollover using Jquery and Bootstrap3, but here is the catch the images must be responsive and it has to be IE7+ compatible, so thats why i'm not using or CSS3 background

Im stuck because everithing i tryied so far is failing on some point (background images are not responsive, IE is not compatible with canvas, position absolute needs a fixed width / Height, etc) can someboy help me? here is what i have been able to make so far...

HTML:

<div class="row">
    <div class="col-sm-8">
            <ul>
                <li>
                    <div class="img-swap2">
                        <img class="animado img-responsive" src="http://dummyimage.com/125x66/000/fff" alt="" />
                        <img class="animado img-responsive" src="http://dummyimage.com/125x66/fff/000" alt="" />
                    </div>
                </li>
                <li>
                    <div class="img-swap2">
                        <img class="animado img-responsive" src="http://dummyimage.com/125x66/000/fff" alt="" />
                        <img class="animado img-responsive" src="http://dummyimage.com/125x66/fff/000" alt="" />
                    </div>
                </li>
            </ul>
    </div>
</div>
<div class="row">
    <div class="col-sm-4">
        <div class="img-swap2">
            <img class="animado img-responsive" src="http://dummyimage.com/125x66/000/fff" alt="" />
            <img class="animado img-responsive" src="http://dummyimage.com/125x66/fff/000" alt="" />
        </div>
        <div class="img-swap2">
            <img class="animado img-responsive" src="http://dummyimage.com/125x66/000/fff" alt="" />
            <img class="animado img-responsive" src="http://dummyimage.com/125x66/fff/000" alt="" />
        </div>
    </div>
</div>

JQuery:

$(document).ready(function(){

    $('.img-swap2').hover(
    function(){
        $(this).children("img:eq(0)").fadeTo('400','0');
        $(this).children("img:eq(1)").fadeTo('800','1');
    },
    function(){
        $(this).children("img:eq(0)").fadeTo('800','1');
        $(this).children("img:eq(1)").fadeTo('400','0');
    });
});

CSS

ul {
    list-style-type: none;
    margin-bottom: 0;
}
ul li {
    display: block;
    float: left;
    border-left: 1px solid #333;
    width: 14%;
    max-height: 63px;
}
.img-swap2 {
    position: relative;
    left: 0;
    top: 0;
}
.img-swap2 img + img {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
}

As you can see.. in the UL it works fine, but on the row the hover image shows wrong, right now im using a fixed size but in the final application im going to have several image sizes

Thnks!

The only thing you had missing was that `position:absolute` on the images, which seems you got fixed now... — Giovanni Silveira, Oct 16 '13 at 22:54
Yes... but now i cannot center the image using margin: o auto :( — Chico3001, Oct 16 '13 at 22:55
center the "img-swap2" div that contains both images outside the UL tag — Chico3001, Oct 16 '13 at 23:00
Twitter's Bootstrap 3 drops support for iE7, see also: http://stackoverflow.com/questions/17974998/updating-bootstrap-to-version-3-what-do-i-have-to-do/18069643, there will be something like https://github.com/coliff/bootstrap-ie7 — Bass Jobsen, Oct 16 '13 at 23:02
DAMN!!... i wasn't aware of that... at this point i think i'll also quit making it IE7 compatible, luckily enough IE7 has only > 1% market share over all the IE family — Chico3001, Oct 16 '13 at 23:09

score 0 · Answer 1 · answered Mar 28 '14 at 17:07

Try using Bootstrap's offset classes:

class="col-sm-4 text-center"

or use margin: 0 auto;

// CSS
.centered {
   margin: 0 auto;
}


// HTML
<div class="container">
   <div class="centered text-center">
       centered content, wrapper for images (img-swap2)
   </div>
</div>

If you add float: none; to .centered it will stay in the Bootstrap grid, too.

Responsive Boostrap3 image swap rollover

1 Answers1