Possible to stack images within a flex container? - html

Question

I have a project that I am currently trying to refactor and am wondering if it is possible to stack images within a flex container?
Here is the HTML for reference:
<div id="dealWrapper">
<!-- HEADER START -->
<div id="flexContainer">
<div id="bigImage">
<img id="orgZ" src="https://i.imgur.com/1KWyDov.jpg" alt="Image of Food" />
<img id="gluZ" src="https://i.imgur.com/9GHwSZR.jpg" alt="Image of Food" />
<img id="sugZ" src="https://i.imgur.com/ugltt9v.jpg" alt="Image of Food" />
<img id="vegZ" src="https://i.imgur.com/zi9R9yl.jpg" alt="Image of Food" />
<img id="ketZ" src="https://i.imgur.com/SSd9KST.jpg" alt="Image of Food" />
<img id="palZ" src="https://i.imgur.com/zs92uob.jpg" alt="Image of Food" />
</div>
<ul class="flexUL">
<li class="vm_clickable" id="organic" data-src="/" data-url="/">
Organic
</li>
<li class="vm_clickable" id="glutenFree" data-src="/" data-url="/">
Gluten-Free
</li>
<li class="vm_clickable" id="sugarFree" data-src="/" data-url="/">
Sugar-Free
</li>
<li class="vm_clickable" id="vegan" data-src="/" data-url="/">
Vegan
</li>
<li class="vm_clickable" id="keto" data-src="/" data-url="/">
Keto
</li>
<li class="vm_clickable" id="paleo" data-src="/" data-url="/">
Paleo
</li>
</ul>
</div>
<!-- END FLEX CONTAINER -->
</div>
<!-- deal wrapper end -->
I would like to stack the images displayed on top of each other (varying z index of course). Is this possible? As far as I know you have to use position:absolute to do this. Seems guaranteed to interfere with flex styles of the previous design. Do I need to get rid of flex and set up the CSS positioning in another way?
Code Pen for reference: https://codepen.io/gchis66/pen/qBZNgBw
edit: sorry if i wasnt clear about the ultimate goal. Ultimately, I want to stack the images on top of eachother then set a css hover rule on each of the links to the right of the images to show the corresponding image by updating the z index to the highest number.

Answer 1

Get rid of the display: flex; in #bigImage a - only the container needs that.
Add position: absolute to #bigImage a.
Then, add ids to the links. So for example then you could do:
#veganlink:hover + #veganimage {
z-index: 1000;
}
This may help you: On a CSS hover event, can I change another div's styling?

Answer 2

Try the following
#flexContainer a{
display: block;
}
#flexContainer a img{
width: 100%;
height: auto;
max-width: 100%;
object-fit: cover;
}

Answer 3

you could use position:absolute + target :
body {
max-width: 1280px;
}
#flexContainer {
display: flex;
width: 100%;
height: auto;
flex-wrap: nowrap;
margin: .5vw auto 1vw;
}
#bigImage a {
display: flex;
justify-content: center;
flex-direction: column;
flex-wrap: nowrap;
align-items: center;
}
#bigImage {
position: relative;
}
#bigImage>a+a {
top: 0;
left: 0;
width: 100%;
position: absolute;
}
#bigImage img:target {
position: relative;
z-index: 1
}
#orgZ {}
#gluZ {}
#sugZ {}
#vegZ {}
#ketZ {}
#palZ {}
#bigImage {
width: 75%;
}
.flexUL {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
width: 25%;
}
.flexUL>li {
height: 100%;
width: 100%;
max-width: 320px;
max-height: 100px;
}
.flexUL>li>a {
color: white;
font-size: 2vw;
margin: auto;
}
.flexUL>li:hover>a:after {
content: "\203A";
font: 300 36px/18px "Roboto Slab";
margin-left: 0.2em;
height: 24px;
vertical-align: middle;
display: inline-block;
color: white;
}
#organic {
background-color: #ccb3d1;
}
#organic:hover {
background-color: #b7a1bc;
}
#glutenFree {
background-color: #e7b020;
}
#glutenFree:hover {
background-color: #cf9d1c;
}
#sugarFree {
background-color: #f07f53;
}
#sugarFree:hover {
background-color: #d8724a;
}
#vegan {
background-color: #889a2c;
}
#vegan:hover {
background-color: #7a8a27;
}
#keto {
background-color: #f49382;
}
#keto:hover {
background-color: #db8475;
}
#paleo {
background-color: #9e5860;
}
#paleo:hover {
background-color: #8e4f56;
}
<div id="dealWrapper">
<!-- HEADER START -->
<div id="flexContainer">
<div id="bigImage">
<img id="orgZ" src="https://i.imgur.com/1KWyDov.jpg" alt="Image of Food" />
<img id="gluZ" src="https://i.imgur.com/9GHwSZR.jpg" alt="Image of Food" />
<img id="sugZ" src="https://i.imgur.com/ugltt9v.jpg" alt="Image of Food" />
<img id="vegZ" src="https://i.imgur.com/zi9R9yl.jpg" alt="Image of Food" />
<img id="ketZ" src="https://i.imgur.com/SSd9KST.jpg" alt="Image of Food" />
<img id="palZ" src="https://i.imgur.com/zs92uob.jpg" alt="Image of Food" />
</div>
<ul class="flexUL">
<li class="vm_clickable" id="organic" data-src="/" data-url="/">
Organic
</li>
<li class="vm_clickable" id="glutenFree" data-src="/" data-url="/">
Gluten-Free
</li>
<li class="vm_clickable" id="sugarFree" data-src="/" data-url="/">
Sugar-Free
</li>
<li class="vm_clickable" id="vegan" data-src="/" data-url="/">
Vegan
</li>
<li class="vm_clickable" id="keto" data-src="/" data-url="/">
Keto
</li>
<li class="vm_clickable" id="paleo" data-src="/" data-url="/">
Paleo
</li>
</ul>
</div>
<!-- END FLEX CONTAINER -->
</div>
<!-- deal wrapper end -->
Pen Demo