0

Don't shoot me, i'm reasonably noobish to coding so am after a little help...

In my main body container i've got a side bar and an article container with 6 wrappers containing 6 transitional images in a 3x2 format. Looks great in full screen but when resized the wrapper is keeping its height and not scaling. Tried a height auto but its just layering the wrappers one on top of the other and a height percentage isn't scaling either.

(Any help is appreciated, thanks. I'd post images but can't till i get a rep)

here's the CSS:

article {
width:70%;
float:left;
margin:auto;

}

.img_wrapper {

float:left;
position:relative;
height:auto;
width:30%;
margin:0 1%;

}

.img_wrapper img {
    border:solid 2px #dbc3e8;   
position:absolute;
width:100%;
height:auto;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}

.img_wrapper img.top:hover {
opacity:0;
}

And here's the HTML:

    <article>
        <div class="img_wrapper">
            <a href="#"><img class="bottom" src="img/index/103a.jpg" alt="" /></a>
            <a href="#"><img class="top" src="img/index/101a.jpg" alt="" /></a>
        </div>
        <div class="img_wrapper">
            <a href="#"><img class="bottom" src="img/index/103a.jpg" alt="" /></a>
            <a href="#"><img class="top" src="img/index/101a.jpg" alt="" /></a>
        </div>
        <div class="img_wrapper">
            <a href="#"><img class="bottom" src="img/index/103a.jpg" alt="" /></a>
            <a href="#"><img class="top" src="img/index/101a.jpg" alt="" /></a>
        </div>

        <div class="img_wrapper">
            <a href="#"><img class="bottom" src="img/index/103a.jpg" alt="" /></a>
            <a href="#"><img class="top" src="img/index/101a.jpg" alt="" /></a>
        </div>
        <div class="img_wrapper">
            <a href="#"><img class="bottom" src="img/index/103a.jpg" alt="" /></a>
            <a href="#"><img class="top" src="img/index/101a.jpg" alt="" /></a>
        </div>
        <div class="img_wrapper">
            <a href="#"><img class="bottom" src="img/index/103a.jpg" alt="" /></a>
            <a href="#"><img class="top" src="img/index/101a.jpg" alt="" /></a>
        </div>

Thanks in advance

Sean Noobite
  • 1
  • Side note, you might like a http://www.w3schools.com/html/html_tables.asp
     – Palmer Jun 21 '14 at 22:49
  • Can you create a jsfiddle - the float:left and position:relative on the same element seem to be what is causing them to appear on top of each other, but I can't see your height issue. – RichardB Jun 21 '14 at 22:53
  • possible duplicate of [Auto height on parent container with Absolute/Fixed Children](http://stackoverflow.com/questions/9061520/auto-height-on-parent-container-with-absolute-fixed-children) - The easiest way would be so not position the images absolutely (I have no idea why you are) or give the parent a height. See http://jsfiddle.net/Zeaklous/kreUa/ – Zach Saucier Jun 21 '14 at 23:11
  • Richard B: height auto in .img_wrapper is what's causing the stack i think, when changed to height:18% for example all images are aligned perfectly. When I scale the window though the wrapper keeps it's height. – Sean Noobite Jun 21 '14 at 23:46
  • Zach: am trying to make it responsive so giving it a height in px limits how it scales... As your jsfiddle shows – Sean Noobite Jun 21 '14 at 23:48
  • Wrapper has to be absolute for the transition on : hover... doesn't it? – Sean Noobite Jun 21 '14 at 23:49
  • @SeanNoobite Ah, Now I understand what you're doing. You should put that in the question... You should only have `position:absolute` on the top one so that the bottom one can still affect the height of the parent, there is no purpose for having both with `position:absolute` http://jsfiddle.net/Zeaklous/kreUa/1/ By the way, use @User'sName so that they get notifications of your comments – Zach Saucier Jun 22 '14 at 01:52

0 Answers0