1

Is there any solution for responsive image mouseover for Bootstrap 3?

Here is my code: http://jsfiddle.net/4gac7/

.image{
background-image:url("http://placehold.it/350x150/000/fff");
width:350px; /* responsive possible ?? */
height:150px; 

}
.image:hover{
background-image:url("http://placehold.it/350x150/ccc/fff");
}

Thank you!

l00per
  • 481
  • 4
  • 7
  • 19
  • Can you explain more ? I don't understand. – BENARD Patrick Jan 22 '14 at 10:38
  • I would like to have responsive mouseover images like this http://jsfiddle.net/4gac7/1/ On mobile, I'm a able to touch on an image and I would see the mouse over image. The problem – isn't responsive because div need width and height. – l00per Jan 22 '14 at 10:41

2 Answers2

3

It will need more HTML code, but you can use the same basic technique as http://alistapart.com/article/creating-intrinsic-ratios-for-video/. You will need to set a width somewhere (because background images don't have intrinsic dimensions), but that could come from a parent element. Essentially:

<div class="wrapper-with-intrinsic-ratio"><div class="element-to-stretch"></div></div>

.wrapper-with-intrinsic-ratio {
    position: relative;
    padding-bottom: 20%; /* Adjust this to suit the aspect ratio of the image */
    height: 0;
    width: 100%;
}
.element-to-stretch {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("http://placehold.it/350x150/000/fff");
    background-size: cover;
}
.element-to-stretch:hover {
    background-image: url("http://placehold.it/350x150/ccc/fff");
}

Here's some documentation on background-size. Secondly, the aspect ratio can be tricky: If the ratio is 2:1 (so the image is twice as wide as it is tall) then the padding-bottom on .wrapper-with-intrinsic-ratio would be 50%. Work it out with (height ÷ width) × 100. So for example your 350×150px image would be padding-bottom: 42.857%; and for a 150x350px it'd be 233.333%.

Alternatively, you could do it with two img elements. Clunky, but...

<div>
    <img src="normal.jpg" alt="" class="normal"><img src="hover.jpg" alt="" class="hover">
</div>

div img { max-width: 100%; height: auto; }
div img.normal,
div:hover img.hover { display: block; }
div img.hover,
div:hover img.normal { display: none; }

Or you could use javascript.

Olly Hodgson
  • 15,076
  • 3
  • 40
  • 60
  • No problem. Two things: Here's [some documentation on background-size](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size). Secondly, the aspect ratio can be tricky: If the ratio is 2:1 (so the image is twice as wide as it is tall) then the `padding-bottom` on `.wrapper-with-intrinsic-ratio` would be `50%`. Work it out with (height ÷ width) × 100. So for a 350×150px image it'd be `padding-bottom: 42.857%;` and for a 150x350px it's be `233.333%`. I'll edit this into the answer. – Olly Hodgson Jan 22 '14 at 11:38
1

Or you could just use a simple onmouseover html tag & give it a class of img-responsive from bootstrap.

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}
<div class="col-lg-6">
<img src="http://placehold.it/350x150/000/fff" onmouseover="this.src='http://placehold.it/350x150/ccc/fff'" onmouseout="this.src='http://placehold.it/350x150/000/fff'" class="img-responsive">
</div>

http://jsfiddle.net/McKmillions/7t63cja2/

Zach McKimmins
  • 11
  • 1