Geek asks and answers

Responsive, floating and centering images

I'm trying to figure out how to encode my HTML and CSS so that the images from the three screenshots match, as in the screenshot below.

The idea is that the user reduces the size of the window, and the images on the left and right should move towards the center or more firmly behind the main image, and the main image is always in the center.

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

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

enter image description here

And the tips or direction would be appreciated super !: 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;
}
+5
source share
2 answers

Running late for a meeting. But if you look at

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

, . -. .

, .

+3

, . , , .

position: absolute;, , . position: relative , . z- .

+1

More articles:


All Articles