HTML CSS Image Overflow issue

Question

I am having an issue with scrollable images that shouldn't be scrollable. I thought that overflow: hidden; should fix that issue, but as of yet no dice.

Below is just a snippet from my code. In my code, there are 4 "a" elements within the wrapper class.

HTML

<a href="Link to other page">
  <div class="container">
     <img class="image" src="image.jpg">
       <div class="overlay"></div>
       <div class="overlay2"></div>
       <div class="overlayText">Title</div>
  </div>
</a>

CSS

.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 55vh;
  grid-auto-columns: 41vw;
  background-color: #eef7e4;
  gap: 1vh;
  padding-left: 1vh;
  padding-right: 1vh;
  overflow: hidden;
}
.container {
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}
.image {
  overflow: hidden;
}
.overlay {
  position: absolute;
  width: 0;
  height: 100%;
  background-color: #e32827;
  opacity: 80%;
  transition: 0.7s ease;
  z-index: 2;
  overflow: hidden;
}
.overlay2 {
  position: absolute;
  width: 0;
  height: 100%;
  background-color: #eef7e4;
  opacity: 80%;
  transition: 0.5s ease;
  overflow: hidden;
}
.overlayText {
  position: absolute;
  width: 50%;
  height: 100%;
  opacity: 0;
  color: #eef7e4;
  transition: 0.6s ease;
  text-align: center;
  margin-top: 50vh;
  z-index: 3;
  overflow: hidden;
}

As you can see by the CSS above, the thought of overflow: hidden; was not working for me. I'm fairly new to webpage design, and after looking through a lot online, the only fix that I found was overflow: hidden; which as stated above isn't working here.

Thank you guys for the help!

Answer 1

Found the problem, I needed to give .container a width & height

.container {
  align-items: center;
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
}