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.

JoeG
  • 37
  • 1
  • 7
  • 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 '20 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. – Simone Rossaini Aug 18 '20 at 13:50

3 Answers3

0

Try the following

#flexContainer a{
display: block;
}

#flexContainer a img{
width: 100%;
height: auto;
max-width: 100%;
object-fit: cover;
}
Umutambyi Gad
  • 4,082
  • 3
  • 18
  • 39
Ehsan
  • 766
  • 10
  • 17
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?

retiredgoblin
  • 21
  • 6
  • 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 '20 at 16:56
  • It seems doable. Maybe consider using vw and vh instead of flex? – retiredgoblin Aug 18 '20 at 17:21
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

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129