Dynamic component size on page

Question

I am making a webpage that auto adjusts so I can use it for any device. I have fixed almost everything so it size adjusts properly except my categories, its the .hip div. They only line underneath each other when the web size is small, but I want the actually Buttons/images to become smaller and follow my other divs. I have no clue why this won't work.

The images will not change size only move. I want them to stay the same place. Only move upwards and become smaller, but look at

.hip {
  
  display: inline-block;
  height: 150px;
  width: 150px;
  max-width: 150px;
  overflow: hidden;
  position: relative;
  top:0px;
  
}
.hip:after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.hip:hover img {
  -webkit-filter: blur(0);
}
.hip:hover button {
  background: rgba(0, 0, 0, 0.5);
  -webkit-filter: blur(0);
}
.hip img {
  -webkit-filter: grayscale(0.5) blur(10px);
  position: absolute;
  z-index: 2;

  top: -10px;
  left: -10px;
  width: 210px;
  height: 200px;

}
.hip button {
  background-color: transparent;
  border: 1px solid white;
  color: white;
  font-weight: 400;
  letter-spacing: 2px;
  padding: .3em 1em;
  position: relative;
  z-index: 10;
  vertical-align: middle;
  text-transform: uppercase;
  font-size: 0.83em;
}

<div class='hip'>
  <a href="barnevakt.html"><img src='http://www.izoncam.com/files/2015/03/babysitter.jpg'width="150" height="150"  />
  
  <button>Barnevakt</button></a>
</div>

<div class='hip'>
  <img src='http://eltying.com.pl/wp-content/uploads/2015/02/Czym-najlepiej-malowa%C4%87-%C5%9Bciany.jpg' width="150" height="150"/>
  <a href="maling.html"><button>Maling</button></a>
</div>

<div class='hip'>
  <a href="renovering.html"><img src='http://www.michanikos.gr/uploads/92f19f6fa1ae850d5be16672b4688868.jpg'width="150" height="150" />
  <button>Oppusing</button></a>
</div>
<div class='hip'>
  <a href="hagearbeid.html"><img src='https://img0.etsystatic.com/020/1/6791412/il_fullxfull.482239814_qief.jpg'width="150" height="150" />
  <button>Hagearbeid</button></a>
</div>

<div class='hip'>
  <a href="hundegåing.html"><img src='http://1.bp.blogspot.com/-Q069CqhGSxE/VIwYNYTnddI/AAAAAAAABdY/7bWjxwD5k8g/s1600/dog-walker.jpg' width="150" height="150"/>
  <button>Dyrepass</button></a>
</div>

<div class='hip'>
  <a href="skolehjelp.html"><img src='https://adhdteacher.files.wordpress.com/2010/09/school_sleeper.jpg'width="150" height="150" />
  <button>Skolehjelp</button></a>
</div>

<div class='hip'>
  <a href="dugnader.html"><img src='http://upload.wikimedia.org/wikipedia/commons/b/bd/EVS_volunteer_project_within_Nevitsky_Castle_reconstruction.jpg' width="150" height="150"/>
  <button>Dugnader</button></a>
</div>

<div class='hip'>
  <a href="måking.html"><img src='http://www.activehealthinstitute.com/wp-content/uploads/2010/12/snowIQ_-_winter_street_shovelling60471.jpg' width="150" height="150"/>
  <button>Måking</button></a>

Answer 1

Few observations:

1. Image sizes (5000px X 5000px) - images are too big to be shown over the web. Sizes should be optimized further with a scope getting load down by 70 to 80%.
2. Positions of HIP divs - why these divs are appearing at the top. Best practice would be to wrap all these HIP divs in another div and place it exactly above the FOOTER div.
3. Transition of image position is happening very smooth and let it be that way only. I recommend not to play around size of images for different screen sizes rather let the images fall one below other - this is the best possible look-n-feel you can expect for those many images. OR else you will need to display the images in SLIDER format for smaller screen sizes - again this would be little time consuming.