0

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">
      <a href="/link"><img id="orgZ" src="https://i.imgur.com/1KWyDov.jpg" alt="Image of Food" /></a>
      <a href="/link"><img id="gluZ" src="https://i.imgur.com/9GHwSZR.jpg" alt="Image of Food" /></a>
      <a href="/link"><img id="sugZ" src="https://i.imgur.com/ugltt9v.jpg" alt="Image of Food" /></a>
      <a href="/link"><img id="vegZ" src="https://i.imgur.com/zi9R9yl.jpg" alt="Image of Food" /></a>
      <a href="/link"><img id="ketZ" src="https://i.imgur.com/SSd9KST.jpg" alt="Image of Food" /></a>
      <a href="/link"><img id="palZ" src="https://i.imgur.com/zs92uob.jpg" alt="Image of Food" /></a>
    </div>
    <ul class="flexUL">
      <li class="vm_clickable" id="organic" data-src="/" data-url="/">
        <a href="/link">Organic</a>
      </li>
      <li class="vm_clickable" id="glutenFree" data-src="/" data-url="/">
        <a href="/link">Gluten-Free</a>
      </li>
      <li class="vm_clickable" id="sugarFree" data-src="/" data-url="/">
        <a href="/link">Sugar-Free</a>
      </li>
      <li class="vm_clickable" id="vegan" data-src="/" data-url="/">
        <a href="/link">Vegan</a>
      </li>
      <li class="vm_clickable" id="keto" data-src="/" data-url="/">
        <a href="/link">Keto</a>
      </li>
      <li class="vm_clickable" id="paleo" data-src="/" data-url="/">
        <a href="/link">Paleo</a>
      </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.

2
  • Are you trying to get all of images into the exact same location? If so, you can just set display: none; on the rest of the images and display: block on the one you want to show.
    – Dan Mullin
    Aug 18, 2020 at 13:42
  • in your codepen you have a menu, so how @DanMullin said, just use js/jquery and change display based to choise menu. Aug 18, 2020 at 13:50

3 Answers 3

0

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?

2
  • hey thanks for the comment! I got rid of flex and did a position:absolute but then was forced to put explicit pixel height/widths on the image to get the menu on the side to line up with the image on the left. Seems like this makes the responsiveness super wacky when implemented. I really would love to use a solution that is purely html/css like your selectors shown though!
    – JoeG
    Aug 18, 2020 at 16:56
  • It seems doable. Maybe consider using vw and vh instead of flex? Aug 18, 2020 at 17:21
0

Try the following

#flexContainer a{
display: block;
}

#flexContainer a img{
width: 100%;
height: auto;
max-width: 100%;
object-fit: cover;
}
0

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">
      <a href="/link"><img id="orgZ" src="https://i.imgur.com/1KWyDov.jpg" alt="Image of Food" /></a>
      <a href="/link"><img id="gluZ" src="https://i.imgur.com/9GHwSZR.jpg" alt="Image of Food" /></a>
      <a href="/link"><img id="sugZ" src="https://i.imgur.com/ugltt9v.jpg" alt="Image of Food" /></a>
      <a href="/link"><img id="vegZ" src="https://i.imgur.com/zi9R9yl.jpg" alt="Image of Food" /></a>
      <a href="/link"><img id="ketZ" src="https://i.imgur.com/SSd9KST.jpg" alt="Image of Food" /></a>
      <a href="/link"><img id="palZ" src="https://i.imgur.com/zs92uob.jpg" alt="Image of Food" /></a>
    </div>
    <ul class="flexUL">
      <li class="vm_clickable" id="organic" data-src="/" data-url="/">
        <a href="#orgZ">Organic</a>
      </li>
      <li class="vm_clickable" id="glutenFree" data-src="/" data-url="/">
        <a href="#gluZ">Gluten-Free</a>
      </li>
      <li class="vm_clickable" id="sugarFree" data-src="/" data-url="/">
        <a href="#sugZ">Sugar-Free</a>
      </li>
      <li class="vm_clickable" id="vegan" data-src="/" data-url="/">
        <a href="#vegZ">Vegan</a>
      </li>
      <li class="vm_clickable" id="keto" data-src="/" data-url="/">
        <a href="#ketZ">Keto</a>
      </li>
      <li class="vm_clickable" id="paleo" data-src="/" data-url="/">
        <a href="#palZ">Paleo</a>
      </li>
    </ul>
  </div>
  <!-- END FLEX CONTAINER -->
</div>
<!-- deal wrapper end -->

Pen Demo

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.