（Bootstrap）悬停按钮上的响应图像？

Question

I am trying to have an image show up over a button while hovering. I know that for Bootstrap, I can add the .img-responsive class while declaring the image in the HTML, but I cant seem to get it working properly with how I was trying to load the images. The buttons themselves are already responsive. I was using a couple blocks of CSS and preloading the images through the CSS. Whats the best way to go about this?

Also, is there a way to add some sort of animation to show the image? Like have the image scroll up from the bottom of the button?

Answer 1

Ever take a look at what .img-responsive does? It doesn't do much. I recommend you override the class and apply the actual responsive design you think will work best for your site.

Taken from boostrap.css :

 .img-responsive{
      display: block;
      max-width: 100%;
      height: auto;
    }

You can also use the following if you already know how your image is supposed to look at certain screen sizes

@media screen and (min-width:500px) {
  .img-responsive{
    //...
  }
}

For the animation. You can intially set it to hidden and wait for the image to finish loading. Then you can do $(#imageId).show("fast"); (or "slow"). Or if you want to control your animation fully then I suggest you follow the jquery doc on how to do that. http://api.jquery.com/animate/