Align these images and HTML and CSS texts in the "correct"

Navigation
0

I have to do my TCC and in 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 that I deem unnecessary for something simple because I know you can do with little and in a more "correct" way, so far I'm using it like this and it's horrible on the part of titles and icons: Link of photos and how the site is so far: link

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%;
}

    
asked by anonymous 11.07.2018 / 04:36

3 answers

1

I made a very simple template using Display:Flex . I tried to use some of your code, but I was not stuck with it, as you said I tried to simplify and optimize the code so you do not have to worry about sizes of Titles or images, because everything will always be aligned regardless of the size of height and width with you can see in the example below.

Do not just copy and paste, read the code, play with it, delete one thing and add others, go testing the properties to understand what was done, as this can be a basis for you to use in the future. p>

Run tb in "All Page" to see that it aligns 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>
    
11.07.2018 / 14:40
0

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

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

I made a small responsive solution. Just use the Position Absolute and Position Relative properties. 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's worth noting that I set a% of% set in the width then you need to change it according to your layout.
11.07.2018 / 14:07
Starta button on the side and not under the mat-table REGEX to remove sites, emails [closed]