1

Any idea why this overflowing is happening? The image max-width and max-height are both set to 100% and only the original div extended 2x its height but not width? Image here The images stacking below each other is another issue

Code here 

var gridItems = document.querySelectorAll('.grid-item');
gridItems.forEach(function(item) {
  item.addEventListener('click', function() {
    item.classList.add('no-hover');
    item.classList.add('transform-active');
    item.classList.add('gone');
  });
});

document.querySelectorAll('.grid-item').forEach(function(element) {
  element.addEventListener('click', function() {
    var elem = document.createElement("img");
    elem.classList.add("revealed")
    elem.src = "https://cdn.discordapp.com/attachments/1051253642876952636/1069628656038719608/image-removebg-preview_1.png"
    document.querySelector(".gone").appendChild(elem);
  });
});
.grid-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 15px;
  height: 600px;
  width: 600px;
  margin: auto;
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  float: left;
}

.grid-item {
  border-radius: 12px;
  background-color: #3d499b;
  box-shadow: 5.5px 5.5px #1e286c;
  border: 2px solid black;
  transition: all 0.3s ease-in-out;
}

.grid-item:not(.no-hover):hover {
  animation: raise 0.2s ease-in-out;
  background-color: #5463cd;
}

.grid-item.transform-active {
  animation: embiggen 0.2s ease-out 0s 1;
}

@keyframes raise {
  0%,100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes embiggen {
  100% {
    transform: scale(1.1);
  }
}

.grid-item.gone {
  visibility: hidden;
}

.revealed {
  max-width: 100%;
  max-height: 100%;
  visibility: visible;
}
<div class="grid-container">
  <div class="grid-item" id="1"></div>
  <div class="grid-item" id="2"></div>
  <div class="grid-item" id="3"></div>
  <div class="grid-item" id="4"></div>
  <div class="grid-item" id="5"></div>
  <div class="grid-item" id="6"></div>
  <div class="grid-item" id="7"></div>
  <div class="grid-item" id="8"></div>
  <div class="grid-item" id="9"></div>
  <div class="grid-item" id="10"></div>
  <div class="grid-item" id="11"></div>
  <div class="grid-item" id="12"></div>
  <div class="grid-item" id="13"></div>
  <div class="grid-item" id="14"></div>
  <div class="grid-item" id="15"></div>
  <div class="grid-item" id="16"></div>
  <div class="grid-item" id="17"></div>
  <div class="grid-item" id="18"></div>
  <div class="grid-item" id="19"></div>
  <div class="grid-item" id="20"></div>
  <div class="grid-item" id="21"></div>
  <div class="grid-item" id="22"></div>
  <div class="grid-item" id="23"></div>
  <div class="grid-item" id="24"></div>
  <div class="grid-item" id="25"></div>
</div>
back2match
  • 45
  • 7
  • you're adding all your gem images into the first element because `querySelector(".gone")` will always return the first encountered. Also, you don't need (or want) two click handlers on the same element. – pilchard Feb 01 '23 at 21:32
  • 1
    Like @pilchard said there is something wrong with your js. You can check this out to fix yout problem with the grid -> [https://stackoverflow.com/questions/44488357/equal-height-rows-in-css-grid-layout](https://stackoverflow.com/questions/44488357/equal-height-rows-in-css-grid-layout) – Imightdoit Feb 01 '23 at 21:37

0 Answers0