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

Unfortunately your HTML is completely out of order, and the images aren't set to resize fluidly. In fact, it's likely impossible to achieve more desirable gallery behavior without rewriting your HTML.

The reason your images appear the way the do is because they're not wrapped in any container that's interacting manageably with the other elements present on the page. In particular, your #front-page has an absolute position that's giving the visual illusion that that it's at the top of the document. It's that same rule that's forcing the images to ignore the #front-page. Unsetting it will make your design "break," but it's a necessary first step toward achieving what you want.

Here's a working example of what (I assume) you're going after. I suspect more complex media queries would yield a better result, but this is a starting point for a more maintainable document:

http://codepen.io/anon/pen/EjmmYB

Note that

<div class="mock-image"></div>

Represents an <img> tag that I was too lazy to add, but the behavior should remain the same for any 1:1 dimensioned image. As an added benefit, setting the padding of the <img> instead of the height will allow you to maintain consistent aspect ratios for images that aren't 1:1.

edit

The rationale

Positioning

Keep it simple. By default elements are static-ly positioned in the document, and most layout elements are display: block, meaning they stack on top of one another. This is good. Converting them to relative has very few drawbacks, and often enhances default behavior (enabling z-indexing, among other things). If you notice, of the four elements that are direct children of <body> (<header>, .splash, .gallery, and <footer>), they're all either static or relative. You don't have to keep those class names, but I recommend keeping almost all elements either static or relative, with very few, specific exceptions. Certainly you should keep layout containers static or relative. Using position: absolute or fixed takes them out of the flow of the document, and this has very unintuitive consequences.

Containers

You'll also notice that where there's content (the .guts and .mock-image elements), that content is wrapped in containers (.splash and .gallery, respectively). Those containers are there to decrease complexity. Instead of having eight images butting up against the .splash, we only have one .gallery. It's far more manageable to deal with two interacting elements than nine, and this is a simple case. Complexity will only grow from here. Additionally, they're both set to width: 100%, meaning as long as they're positioned relative or static, they'll always stack on top of each other, which is exactly the kind of predictable behavior you want.

The gallery

An added benefit of setting the containers to width: 100% is that it scales with the window, meaning all percentage-based children (in this case your images) will scale with the window too. Typically you do want it to max out at some point (hence the .wrap with a max-width: 1000px), but up until that point, especially for galleries, this is the behavior you want. The @media query is a bonus: since 12.5% of a mobile screen is tiny (on an iPhone it would be only 40px by 40px), on smaller screen dimensions the media query sets images to 25% instead of 12.5%, resulting in an 80px by 80px image.

Since your thumbnails will only ever be at most 162.5px by 162.5px in this case, you also, as another poster said, want to crop them in an image editing program before you use them, otherwise you're wasting crazy bandwidth.

Answer 2

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.