Zenithal Zenithal - 27 days ago 13
CSS Question

Can't seem to be able to get images to overlay with each other

I've been trying to make my own automatic image slider, but for some reason I can't seem to get the 3 images that I want shown by default in the correct positions. I want one main image in the middle of a div, and then two more shown on the right (with a smaller width) , cut off with an overflow: hidden. I've tried everything as far as my knowledge of CSS and HTML go and just can't get it looking right. The image below shows what I am trying to accomplish using HTML and CSS.

Image: Very Artistic Image

HTML & CSS

Answer

Have done a flexbox solution for this:

#image1 {-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 8 1 auto;
-ms-flex: 8 1 auto;
flex: 8 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;}

This is the relevant part.

This is the other relevant part:

#image2:hover{
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 98 1 auto;
-ms-flex: 98 1 auto;
flex: 98 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}

This is quite complicated to explain, best to check a tutorial on flexbox, it's the layout future anyway.

Here is the link to the pen.

http://codepen.io/damianocel/pen/ZBbjOp