spike__x

transition

zencoder.ru/css/css-grid-zurb-foundation-5

Для чего нужны

.rr{
  max-width: 790px;
  width: 100%;
}

Убрал display: inline-block;
закомментировал не нужные

codepen

border-bottom: 1px dotted black;

Так у вас max-width стоит вот оно и растянулось максимум на 900px
И border-box не срабатывает потому что не указан width
Добавьте к ссылкам width: 150px; тогда оно не будет так дергатся

Вот так например

.column .one-fourth:hover {
    transform: scale(1.1,1.1);
}

У вас тут два класса column и one-fourth и у обоих надо точку ставить

lazy load jquery гуглите

У вас этот див

class="woocommerce-product-gallery woocommerce-product-gallery--with-images woocommerce-product-gallery--columns-4 images"

opacity: 0;

Может так подойдет Пример
То есть поместить block1 в block2, тогда рыба будет подстраиваться под рыбака :)))

position: absolute; обоим псевдоэлементам

body {
   margin: 0;
}

Задайте контейнеру блоков

div {
  display: inline;
}

https://codepen.io/anon/pen/MvZaxd

Можно через animation
или через hover