Fade in Overlay with more pictures which are in one class

Question

I am trying to resolve my problem with website.

I am using CSS Gap Space with FlexBox and the images are set in two rows of two images, so I would like to keep this view.

Now, I am trying to get into this pictures Fade in Overlay like this - overlay

But when I set all the values, my code breaks.

article {
  position: absolute;
  background-color:   linear-gradient(rgba(31, 38, 65, rgba(244, 244, 245, 0.7),0.7));
  background-size: 100%;
  background-position: center;
  background-size: cover;
}

.ciele {
  font-family: 'Inter',sans-serif;
  margin-top: 150px;
  margin-left: 220px;
  font-size: 26px;
  line-height: 140%;
  font-weight: 300;
}

.ciele-popis{
  font-family: 'Tiemposfine' ,sans-serif;
  margin-top: 20px;
  margin-left: 220px;
  font-size: 54px;
  line-height: 120%;
  font-weight: 400;
  margin-right: 700px;
  flex: 1;
  color: black;
  letter-spacing: 0;
  display: block;
  margin-top: 20px;
  padding-bottom: 65px;
}

.image-box{
  height: 300px;
  position: static;
  margin-left: 220px;
  margin-right: 220px;
  object-fit: contain;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 120px;
}

<article>
  <h1 class="ciele">Náš cieľ</h1>
  <p class="ciele-popis">Zážitky, ktoré budujeme našími skúsenosťami.</p>

<div class="image-box">
  <img src="images/financne_sluzby.png" alt="" width="680px" height="465px">
  <img src="images/smiling-woman.jpeg" alt="" width="680px" height="465px"> 
  <img src="images/rodina.jpeg" alt="" width="680px" height="465px">
  <img src="images/biznis.jpeg" alt="" width="680px" height="465px"> 
</div>  



</article>

Answer 1

There are several things causing your code to break, so instead of explaining every point, I've made corrections below.

1. See this helpful visual reference on how to use Flexbox.
2. Please also review this on writing proper linear gradients.

article {
  background-image: linear-gradient(90deg, rgba(31, 38, 65) 0%, rgba(244, 244, 245) 100%);
}

.ciele {
  font-family: 'Inter',sans-serif;
  margin-left: 220px;
  font-size: 26px;
  line-height: 140%;
  font-weight: 300;
}

.ciele-popis{
  font-family: 'Tiemposfine' ,sans-serif;
  margin-top: 20px;
  margin-left: 220px;
  font-size: 54px;
  line-height: 120%;
  font-weight: 400;
  margin-right: 700px;
  flex: 1;
  color: black;
  letter-spacing: 0;
  display: block;
  margin-top: 20px;
  padding-bottom: 65px;
}

.image-box{
  place-content: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 120px;
}


img {
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.image-wrapper {
  position: relative;
}

.image-wrapper:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

<article>
  <h1 class='ciele'>Náš cie?</h1>
  <p class='ciele-popis'>Zážitky, ktoré budujeme našími skúsenos?ami.</p>

  <section class='image-box'>
    <div class='image-wrapper'>
      <img src='https://loremflickr.com/500/360' alt=''>
      <div class='overlay'>
        <div class="text">Text Here</div>
      </div>
    </div>
    <div class='image-wrapper'>
      <img src='https://loremflickr.com/500/360' alt=''>
      <div class='overlay'>
        <div class="text">Text Here</div>
      </div>
    </div>
    <div class='image-wrapper'>
      <img src='https://loremflickr.com/500/360' alt=''>
      <div class='overlay'>
        <div class="text">Text Here</div>
      </div>
    </div>
    <div class='image-wrapper'>
      <img src='https://loremflickr.com/500/360' alt=''>
      <div class='overlay'>
        <div class="text">Text Here</div>
      </div>
    </div>
  </section>  
</article>