Pretor DH

• реализован переход между страницами через меню без JavaScript;
  
• можно переключить галерею в режим справа на лево.
  

.container { 
    position: absolute;
    top: 0; left: 0;
    bottom: 0; right: 0;
    overflow-x: scroll;
    
    -ms-writing-mode: tb-lr;
    -webkit-writing-mode: vertical-lr;
    -moz-writing-mode: vertical-lr;
    -ms-writing-mode: vertical-lr;
    writing-mode: vertical-lr;    
}
.items {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;

    -ms-writing-mode: lr-tb;
    -webkit-writing-mode: horizontal-tb;
    -moz-writing-mode: horizontal-tb;
    -ms-writing-mode: horizontal-tb;				
    writing-mode: horizontal-tb; 
}

.small {
 ...   /* здесь спозицинируйте малый банер */
}
.big {
   display: none;
}
header:hover .big {
    display: block;
    position: absolute;
   ...  /* здесь спозицинируйте и анимируйте большой банер */
}

<main>
    <div>
        <p>Span</p><p>Span</p><p>Span</p><p>Span</p><p>Span</p>
    </div>
    <div>
        <p>Span</p><p>Span</p><p>Span</p>
    </div>
    <div>
        <p>Span</p><p>SpanSpanSpanSpan</p><p>Span</p><p>Span</p><p>Span</p><p>Span</p><p>Span</p><p>Span</p><p>Span</p>
    </div>
</main>

main {
    position:relative;     /* должно быть отлично от static */
    overflow:hidden;
}
div {
    vertical-align:top;
    position:relative;
    display:inline-block;
    z-index:1;             /* заменить на background:gray; если плохо использовать z-index */
}
div:after {
    content:'';
    position:absolute;
    left:0;right:0;
    bottom:-1000%;      /* здесь максимально возможная разница между блоками в процентах (здесь х10)*/
    top:0;z-index:-1;      /* заменить top на top:100%; если нужно забрать z-index */
    background:gray;
}

function feather(mask) {
     $('img.feather').each( function(){
          var src = this.attr('src');
                mask = mask || this.data('mask') || 'http://dragon.deparadox.com/img/wual.png';
          src = 'url(data:image/svg+xml;base64,'+btoa(
'<svg width="400" height="300" baseProfile="full" version="1.2">'+
'        <defs>'+
'            <mask id="svgmask2" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"'+ 'transform="scale(1)">'+
'                <image width="100%" height="300" xlink:href="'+mask+'" />'+
'            </mask>'+
'        </defs>'+
'        <image id="the-mask" mask="url(#svgmask2)" width="100%" height="300" y="0" x="0" xlink:href="'+src+'" />'+
'    </svg>')+')';
          this.attr('src',src);
     });
}

...
      /* Добавим data-header="M" к .masonry-item*/
     <div class="col-lg-3 col-md-3 col-sm-3 col-xl-12 masonry-item" data-header="M">
          /* <li class="header">M</li>  Убрать из разметки*/ 
          ...
     </div>
     ...

.masonry-item[data-header]:before {
               content: attr(data-header);
               display: block;
               font-weight:bold;
          }

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li title="Action" id="action" ><a href="#action">Action</a></li>
    <li title="Another action" id="aaction"><a href="#aaction">Another action</a></li>
    <li title="Something else here" id="some"><a href="#some">Something else here</a></li>
    <li class="divider"></li>
    <li title="Separated link" id="separ"><a href="#separ">Separated link</a></li>
  </ul>
</div>

<script>
window.onhashchange = function(e){ 
	        var secure = '; secure';
/* имя поля куки */
	        var name = 'menu';
/* ложим пункт меню в шапку сайта */
	        document.title  = document.getElementById(window.location.hash.substring(1)).title; 
/* ложим пункт меню в куки сайта */
	        document.cookie = [   name, '=', encodeURIComponent(document.title), secure].join('');
});
</script>

<style>
/* CSS */
 li[id]:target {
    /* здесь позиционируеш блок li в шапке меню */
}
</style>

<div class="lin1">
<div class="lin2">
Текст, который не выходит за пределы lin2. 
Растягивает его по ширине и высоте, переносит строки.
</div></div>

<style>
.lin1 {
position: relative;
height: auto;             
/* формируется из высот содержимого родного потока - у которого дальше содержимого нет */
width: 180px;
background: url(...) no-repeat;
}
.lin2 {
width: 150px;
/* position: absolute;        /*   выделяется в новый поток непривязаный к родителю.     */  
position: relative;             
/* РЕШЕНИЕ: Меняем на relative чтобы остаться в потоке родителя */
height: 100%;                 
 /* Растягивает блок по высоте первого родителя у которого position отличное от fixed - себя, потому что родитель потока */
display: table;
white-space: normal;
}
</style>