Align these images and HTML and CSS text in the "correct" way

Question

I have to do my TCC and on one of the pages I have to align an image, an icon and a title one over the other (photo), I can do this but with many codes I think unnecessary for something simple because I know it has how to do with little and in a more way "correct", so far I’m wearing this and it’s awful on the titles and icons part: Link to the photos and how the site is so far: https://drive.google.com/open?id=1qR2WBE6ORpdbzPFyPAEql12lBIVD2gz1

HTML

<div id="content">
        <div id="imagens">
        <a href="#">
            <img src="imagens/igrejaF.png" class="iconeC">
            <h1 class="tit">Administração</h1>
            <img src="imagens/hotelariaMob.png" class="imagens">
        </a>
        <a href="#">
            <img src="imagens/macaF.png" class="iconeC">
            <h1 class="tit2">Análises Clínicas</h1>
            <img src="imagens/fisicaMob.png" class="imagens">
        </a>
        <a href="#">
            <img src="imagens/fogueteF.png" class="iconeC" id="foguete">
            <h1 class="tit" id="tit3">Contabilidade</h1>
            <img src="imagens/astroMob.png" class="imagens">
        </a>
        <a href="#">
            <img src="imagens/lampadaF.png" class="iconeC" id="lampada">
            <h1 class="tit2" id="tit4">Design de Interiores</h1>
            <img src="imagens/eletroMob.png" class="imagens">
        </a>

CSS

#content{
    float: left;
    margin-top: 0;
    align-content: center;
    width: 100%;
}

#imagens{
    margin-top:12%;
    margin-left:0.7%;
    width: 100%;
}

.iconeC{
    position:absolute;
    width:14%;
    margin-left:18%;
    float:left;
    margin-top: 5%;
    z-index: 2;
}
.imagens{
    filter: sepia(60%) blur(1.3px) brightness(54%);
    float: left;
    margin-left:  3%;
    margin-top: 3%;
}

.tit{
    font-family: Roboto-Thin;
    color: white;
    z-index: 2;
    font-size: 24px;
    margin-top: 22%;
    margin-left: 10%;
    position: absolute;
}
.tit2{
    font-family: Roboto-Thin;
    font-family: Roboto-Thin;
    color: white;
    z-index: 2;
    position:  absolute;
    float: left;
    font-size: 24px;
    margin-left: 51%;
    margin-top: 22%;
}
#tit3{
    margin-top: 52%;
}
#tit4{
    margin-top: 52%;
}
#foguete{
    display: flex;
    margin-left: 18%;
    margin-top: 37%;
    width: 14%;
}
#lampada{
    display: flex;
    margin-left: 68%;
    margin-top: 36%;
    width: 10%;
}

Answer 1

I made a very simple model using Display:Flex. I tried to use some of your code, but I didn’t get stuck with it, as you said I tried to simplify and optimize the code so you didn’t have to worry about Title or Image sizes, because everything will always be aligned independent of height and width size with vc can see in the example below.

Not only copy and paste, read the code, play with it, delete one thing and add others, test the properties to understand well what was done, because this can be a baseline for you to use in the future.

Run tb on "Whole Page" to see that it will align responsively

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.container {
    width: 50%; 
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto;
}
.container .wrapper {
    min-width: calc(50% - 2rem);
    margin: 1rem;
    height: auto;
    /* background-color: #ff0000; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.box {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    
}
.box img {
    object-fit: cover;
}
.cont {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.cont h5 {
    margin: 0.5em auto;
    font-family: Roboto-Thin, sans-serif;
    color: white;
    font-size: 24px;
    text-align: center;
}

<div class="container">
    <div class="wrapper">
        <a href="#">
            <div class="box">
                <img src="http://unsplash.it/250/150" alt="">
                <div class="cont">
                    <img src="http://placeskull.com/50/50" alt="">
                    <h5>paralelelpípedo</h5>
                </div>
            </div>
        </a>
    </div>
    <div class="wrapper">
        <a href="#">
            <div class="box">
                <img src="http://unsplash.it/150/150" alt="">
                <div class="cont">
                    <img src="http://placeskull.com/50/50" alt="">
                    <h5>Tit Lorem, ipsum.</h5>
                </div>
            </div>
        </a>
    </div>
    <div class="wrapper">
        <a href="#">
            <div class="box">
                <img src="http://unsplash.it/150/250" alt="">
                <div class="cont">
                    <img src="http://placeskull.com/50/50" alt="">
                    <h5>Tit123</h5>
                </div>
            </div>
        </a>
    </div>
    <div class="wrapper">
        <a href="#">
            <div class="box">
                <img src="http://unsplash.it/250/150" alt="">
                <div class="cont">
                    <img src="http://placeskull.com/50/50" alt="">
                    <h5>Lorem ipsum</h5>
                </div>
            </div>
        </a>
    </div>
</div>

Answer 2

If I’m supposed to put the icon and the text over the image I think this works, I saw it on the Internet, you can test.

<img id="imagem" src="www.link.com/imagem.jpg"/>
<div id="texto">Texto que fica sobre a imagem</div>

Answer 3

I made a small responsive solution. Just use the properties Position Absolute and Position Relative. As for the icons, just save them all in square proportion, regardless of the size will suit the layout.

See in the example:

#content {
  float: left;
  margin-top: 0;
  width: 100%;
  max-width: 500px;
}
.boxImagens {
  width: 46%;
  height: 100%;
  max-height: 150px;
  margin: 2%;
  float: left;
  position: relative;
}
.imagens {
  filter: sepia(60%) blur(1.3px) brightness(54%);
  width: 100%;
  height: 100%;
}
.boxDesc {
  z-index: 99;
  text-align: center;
  width: 50%;
  margin: 11% 25%;
  position: absolute;
}
.icon {
  width: 60%;
}
.descTitle {
  font-family: Arial;
  color: white;
  font-size: 1em;
}

<div id="content">
  <div id="imagens">

    <a href="#" class="boxImagens">
      <div class="boxDesc">
        <img src="http://www.socialmusic.com.br/v3/wp-content/themes/meutema/images/icones/icon-instagram.png" class="icon">
        <h1 class="descTitle">Administração</h1>
      </div>
      <img src="https://static.todamateria.com.br/upload/57/b7/57b7235c6af22-paisagem-natural.jpg" class="imagens">
    </a>

    <a href="#" class="boxImagens">
      <div class="boxDesc">
        <img src="http://www.socialmusic.com.br/v3/wp-content/themes/meutema/images/icones/icon-instagram.png" class="icon">
        <h1 class="descTitle">Administração</h1>
      </div>
      <img src="https://static.todamateria.com.br/upload/57/b7/57b7235c6af22-paisagem-natural.jpg" class="imagens">
    </a>

    <a href="#" class="boxImagens">
      <div class="boxDesc">
        <img src="http://www.socialmusic.com.br/v3/wp-content/themes/meutema/images/icones/icon-instagram.png" class="icon">
        <h1 class="descTitle">Administração</h1>
      </div>
      <img src="https://static.todamateria.com.br/upload/57/b7/57b7235c6af22-paisagem-natural.jpg" class="imagens">
    </a>

    <a href="#" class="boxImagens">
      <div class="boxDesc">
        <img src="http://www.socialmusic.com.br/v3/wp-content/themes/meutema/images/icones/icon-instagram.png" class="icon">
        <h1 class="descTitle">Administração</h1>
      </div>
      <img src="https://static.todamateria.com.br/upload/57/b7/57b7235c6af22-paisagem-natural.jpg" class="imagens">
    </a>
  </div>
</div>

• It is worth mentioning that I have width fixed in the #content then you need to change according to your layout.