Wyrównanie, płynne i centrowanie obrazów

Question

Próbuję dowiedzieć się, jak kodować mój kod HTML &, aby 3 obrazy zrzutu ekranu wyglądały jak na poniższym zrzucie ekranu.

Pomysł polega na tym, że użytkownik zmienia rozmiar okna na mniejszy, a obrazy po lewej i prawej stronie powinny przesuwać się w stronę środka, lub ściślej za głównym obrazem, a główne zdjęcie pozostaje zawsze wyśrodkowane.

My Dev Link: http://leongaban.com/portfolio/athenasweb/

My CodePen http://codepen.io/leongaban/pen/AwJFt

i wskazówki lub kierunku byłoby bardzo mile widziane! : D

HTML

<div class="pattern"> 

    <div class="athena_thumbs"> 

     <div class="first"> 
      <img src="../../images/athena1.jpg"/> 
     </div> 

     <div class="second"> 
      <img src="../../images/athena2.jpg"/> 
     </div> 

     <div class="third"> 
      <img src="../../images/athena3.jpg"/> 
     </div> 

    </div> 

</div> 

CSS

div.inner .pattern { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background-image:url('http://leongaban.com/images/pattern_diagonal_lines.png'); 
    background-repeat: repeat; 
    z-index:2; 
}  

.athena_thumbs { 
    position: absolute; 
    max-width: 1000px; 
    margin: 250px auto 0; 
} 

.athena_thumbs .first { 
    position: relative; 
    margin: 0 auto; 
    float: left; 
    left: 25%; 
    right: 25%; 
    z-index: 3; 
} 

.athena_thumbs .second { 
    position: relative; 
    float: left; 
    left: 10%; 
    right: 5%; 
    z-index: 2; 
} 

.athena_thumbs .third { 
    position: relative; 
    float: left; 
    right: 10%; 
    left: 5%; 
    z-index: 1; 
} 

Answer 1

spóźniony na spotkanie. Ale jeśli spojrzeć na

Code pióra: http://codepen.io/anon/pen/bazEr

.athena_thumbs { 
    position: absolute; 
    width: 90%; 
    margin-left: 5%; 
    text-align: center; 
    overflow: hidden; 
} 

.athena_thumbs .first { 
    position: relative; 
    margin: 0 auto; 
    z-index: 3; 
} 

.athena_thumbs .second { 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 2; 
} 

.athena_thumbs .third { 
    position: absolute; 
    right: 0px; 
    top: 0px; 
    z-index: 1; 
} 

myślę, że to będzie Ci idzie we właściwym kierunku. Nie ma nic w drodze sprawdzania w różnych przeglądarkach. Tylko podstawowy efekt zależy mniej więcej na miejscu.

Mam nadzieję, że to pomoże.

Answer 2

Mam nadzieję, że to pomoże. Przygotowałem małą demonstrację, w jaki sposób chciałbym uzyskać pożądany efekt, który można znaleźć pod here.

Ustawiam zewnętrzne miniaturki na position: absolute;, przyklejając je do każdej strony pojemnika nadrzędnego i zapewniając, że dasz im najwyższą pozycję, aby utrzymać je w linii. Ustaw wyśrodkowaną miniaturę na position: relative i wyśrodkuj ją z automatycznymi marginesami, tak jak zwykle. Indeksowanie z zera utrzymuje kciuki z zewnątrz za środkowym.