在调整大小时将图像的一部分与css重叠

Question

I have a sprite image and i want it to be animated on hover, as in slide up/down to reveal the other hidden part(coloured sprite). My css below works fine for pixels but i also want to make it responsive so that it resizes when the browser is minimised/resized.

<div class="img" style="background-image: url(a.jpg)"></div>

<style>
.img {
background-position: 0 -258px;
display: block;
height: 258px;
margin: 0 0 3px;
position: relative;
width: 205px;
z-index: 1;
}
</style>

Answer 1

The easiest way to make an image responsive is to give it a width of 100% and leave it at that. That way, it will always use the width of the parent container, and also use that width to find a ratio to render the height appropriately.

Take a look at this:

<div class="wrapper"><img class="img" src="a.jpg" width="100%" alt="image" /></div>

<style>
  .wrapper { width:20%;}
</style> 

In the above code, the image will adjust acording to the wrapper's dimensions and will resize when the window is resized.

But with your code, you need to hide part of the image, thus styling the wrapper class to be responsive will be a headache.

Here is what i came up with:

<style>
  .wrapper { width:244px; height:256.5px; overflow:hidden;}
  .img{transition: 1s ease-in;}
  .wrapper:hover > .img{ margin-top:-105%;}
</style> 

Now all you have to do is make your wrapper class fluid, and the image will follow suite. Mybe percentage will do the trick.