Zenithal - 9 months ago 52
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

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