Ausrichten, Floating und Zentrierung von Bildern in Reaktion

Question

Ich versuche herauszufinden, wie ich meine HTML & CSS zu codieren, um die 3 Screenshots Bilder wie im Screenshot unten ausgerichtet haben.

Die Idee ist, wenn der Benutzer das Fenster kleiner verkleinert, sollten die Bilder links und rechts in Richtung Zentrum oder enger hinter dem Hauptbild und das Hauptbild immer zentriert bleiben.

Mein Dev-Link: http://leongaban.com/portfolio/athenasweb/

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

Und Tipps oder Richtung wäre Super geschätzt! : 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

Lauf spät zu einer Sitzung. Aber, wenn Sie bei

-Code Pen einen Blick: 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; 
} 

ich denke, das werden Sie in die richtige Richtung. Der browserübergreifenden Überprüfung steht nichts im Wege. Nur die grundlegende entsprechende Wirkung mehr oder weniger an Ort und Stelle.

Hoffe, das hilft.

Answer 2

Ich hoffe, das hilft Ihnen aus. Ich habe eine kleine Demonstration zusammengestellt, wie ich den gewünschten Effekt erzielen würde, den Sie finden können: here.

Ich würde die äußeren Thumbnails auf position: absolute; setzen, sie auf beiden Seiten des übergeordneten Containers kleben und sicherstellen, dass Sie ihnen eine obere Position geben, um sie in einer Linie zu halten. Setzen Sie das zentrierte Miniaturbild auf position: relative und zentrieren Sie es wie gewohnt mit automatischen Rändern. Z-Indizierung hält die äußeren Daumen hinter dem zentrierten.