Text Won't Overlap Image and Moves up When Resizing Browser

Question

I'm trying to make a text inside overlap an image inside of a link. The problem is that I tried using top. It works, but if I try to resize the browser it moves up and doesn't stay in the middle of the image.

    .background1 {
      padding: 40px 20px;
      max-width: 500px;
      margin: 20px;
      transition: 0.5s;
    }

    .background1 a {
      text-decoration: none;
      color: white;
    }

    .background1 a .overlay h2 {
      position: relative;
      text-align: center;
    }

    .background1 img {
      width: 100%;
      border: 3px solid grey;
      transition: 0.5s;
    }

   .overlay{
     color: white;
     text-shadow: 0 2px 4px black;
    }

  <div class="content">
    <div class="background1">
      <a href="#">
        <img src="icon1.jpg"></a>
      <div class="overlay">
        <h2>Web Design</h2>
      </div>
      </a>
    </div>
    <div class="background1">
      <a href="#">
        <img src="icon2.jpg"></a>
      <div class="overlay">
        <h2>JAVA</h2>
      </div>
      </a>
    </div>
    <div class="background1">
      <a href="#">
        <img src="icon3.jpg"></a>
      <div class="overlay">
        <h2>CSS</h2>
      </div>
      </a>
    </div>
    <div class="background1">
      <a href="#">
        <img src="icon4.jpg"></a>
      <div class="overlay">
        <h2>HTML</h2>
      </div>
      </a>
    </div>
</div>

If I leave it just like this. The h2 text will be at the bottom center of the image. If I add top: -120px; then the text goes to the middle of the image. However, when I try to resize to see how it will look in a mobile phone, it starts moving up away from the image.

How can I fix this? Also, I would like to keep it in css. I'm still learning, so I don't want to go deep into some weird functions or coding.

Answer 1

Something like this is what you want, I think. You need to put the overlay inside the anchor and position it absolutely so it covers the image completely. Then you center the text within this overlay. When you resize the viewport, the text will stay in the middle, but of course it will get bigger relative to the image. (This can be adjusted with media queries, if necessary).

* {
  box-sizing: border-box;
}

.content {
  display: flex;
  flex-wrap: wrap;
  background: blanchedalmond;
}

.background1 {
  width: 40%;
  background: oldlace;
  margin: 10px;
}

.background1 a {
  text-decoration: none;
  color: white;
  padding: 40px;
}

.anchor {
  border: 3px solid grey;
  position: relative;
  display: inline-block;
  text-align: center;
  box-shadow: -2px 2px 5px 2px rgba(0, 0, 0, 0.2);
}

img {
  width: 100%;
  vertical-align: middle;
}

.overlay {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
}

h2 {
  margin: auto;
}

<div class="content">
  <div class="background1">
    <a class="anchor" href="#">
      <img src="https://i.guim.co.uk/img/media/a1e119a48076615b6502ceccd369bc72bcf5d93a/0_374_5616_3370/master/5616.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=68a05c30b5154497160d38f176556727">
      <div class="overlay">
        <h2>Web Design</h2>
      </div>
    </a>
  </div>
  <div class="background1">
    <a class="anchor" href="#">
      <img src="https://i.guim.co.uk/img/media/a1e119a48076615b6502ceccd369bc72bcf5d93a/0_374_5616_3370/master/5616.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=68a05c30b5154497160d38f176556727">
      <div class="overlay">
        <h2>JAVA</h2>
      </div>
    </a>
  </div>
  <div class="background1">
    <a class="anchor" href="#">
      <img src="https://i.guim.co.uk/img/media/a1e119a48076615b6502ceccd369bc72bcf5d93a/0_374_5616_3370/master/5616.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=68a05c30b5154497160d38f176556727">
      <div class="overlay">
        <h2>CSS</h2>
      </div>
    </a>
  </div>
  <div class="background1">
    <a class="anchor" href="#">
      <img src="https://i.guim.co.uk/img/media/a1e119a48076615b6502ceccd369bc72bcf5d93a/0_374_5616_3370/master/5616.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=68a05c30b5154497160d38f176556727">
      <div class="overlay">
        <h2>HTML</h2>
      </div>
    </a>
  </div>
</div>