Allineare, fluttuare e centrare le immagini in modo reattivo

Question

Sto cercando di capire come codificare il mio HTML & CSS per far allineare le 3 immagini degli screenshot come nell'immagine qui sotto.

L'idea è quando l'utente ridimensiona la finestra più piccola le immagini a sinistra e a destra dovrebbero spostarsi verso il centro, o più stretto dietro l'immagine principale e l'immagine principale rimane sempre centrata.

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

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

E consigli o direzione sarebbe super apprezzato! : 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

in ritardo per una riunione. Ma, se si dà un'occhiata a

Codice della penna: 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; 
} 

Penso che questa sarà farti andare nella direzione corretta. Non c'è nulla nel modo di controllare i browser. Proprio l'effetto base di base più o meno sul posto.

Spero che questo aiuti.

Answer 2

Spero che questo ti aiuti. Ho messo insieme una piccola dimostrazione di come farei ottenere l'effetto che cerchi, che puoi trovare here.

Vorrei impostare le miniature esterne su position: absolute;, incollandole su entrambi i lati del contenitore padre e assicurandoti di dare loro una posizione di primo livello per tenerle in linea. Imposta la miniatura centrata su position: relative e centra con i margini automatici come faresti normalmente. l'indicizzazione z mantiene i pollici esterni dietro quello centrato.