Text on <img> using CSS

Question

I want to display text at the center of my 4 images. No matter what I do it doesn't display at all or display on the top of the page.

Somebody, please help me!

By the way, does anybody know how to make banner-text always stay the same (the same as at 100%) when zooming?

UPD: https://jsfiddle.net/5no1pjt2/4/

/* quick reset */
* {
  margin: 0;
  padding: 0;
  border: 0;
}

#banner {
    position: relative;
    width: 100%;
}

#banner img {
    width: 100%;
    height: 100%;
    float: left; /* no line after <img> */
}

#banner-text {
    position: absolute;
    margin: 250px 120px;
    font-size: 42px;
    color: #ffffff;
    /* background: rgba(0, 0, 0, 0.5); */
}

#banner-text p {
    width: 800px;
    /* font-family: Palanquin Regular; */
    font-size: 24px;
    line-height: 24px;
}


#img__wrap img {
    width: 50%;
    height: auto;
    /* display: inline-block; */
    float: left; /* no line after <img> */
    /* transition */
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

#img__wrap img:hover {
    /* filters for animation */
    -webkit-filter: brightness(70%);
    -moz-filter: brightness(70%);
    -o-filter: brightness(70%);
    -ms-filter: brightness(70%);
    filter: brightness(70%);
}



/* relevant styles */
#img__wrap {
  position: relative;

}

.img__description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(29, 106, 154, 0.72);
  color: #fff;
  visibility: visible;
  opacity: 0;


}

#img__wrap:hover .img__description {
  visibility: visible;
  opacity: 1;
}

        <div id="banner">
            <img src="http://placehold.it/1920x1080"/>

            <div id="banner-text">
                <h1>Lorem ipsum dolor sit amet</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis ultrices tellus, at        vulputate risus.Cras convallis molestie libero, ac fringilla lacus lobortis ut.
                </p>
            </div>

        </div>


    <div id="img__wrap">
        <img class="img__img" src="http://placehold.it/952x512"/>
        <p class="img__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <img class="img__img" src="http://placehold.it/952x512"/>
        <p class="img__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <img class="img__img" src="http://placehold.it/952x512"/>
        <p class="img__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <img class="img__img" src="http://placehold.it/952x512"/>
        <p class="img__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>

Answer 1

I want to display text at the center of my 4 images. No matter what I do it doesn't display at all or display on the top of the page.

You have two problems:

1. The "absolute" position declaration for the "img__description".
   The absolute position rule you have used on the text (<p class="img__description">...</p>) places all 4 texts in the upper left hand corner of the page. Declare a relative position for the text, and then give the text something to be relative to. (See next point).

2. Structure: No relation exists between each img and text pair
   There is currently no container or relationship tying any of the text elements (<p class="img__description">...</p>)
   to any of your 4 images: <img class="img__img" src="..." />.

It will be difficult to position the text relative to the appropriate image without a wrapper. Consider either:

• moving the image inside each paragraph, and moving your positioning and sizing rules to the paragraph, which will act like a wrapper;
• or add a <div> around each image and text pair, and subsequently move your positioning and sizing rules to the new <div> wrapper

Either of these wrapper options will also constrain the height and width of the text, which you also need.

Answer 2

The key is to create a wrapper to hold your image and text. Then add position relative to that wrapper. And then to the text inside it, add top 50% and then lift it half of its height by adding transform translateY(-50%). If you want the same for X axis, use left 50% and translateX(-50%).

/* quick reset */
* {
  margin: 0;
  padding: 0;
  border: 0;
}

#banner {
    position: relative;
    width: 100%;
}

#banner img {
    width: 100%;
    height: 100%;
    float: left; /* no line after <img> */
}

#banner-text {
    position: absolute;
    margin: 250px 120px;
    font-size: 42px;
    color: #ffffff;
    /* background: rgba(0, 0, 0, 0.5); */
}

#banner-text p {
    width: 800px;
    /* font-family: Palanquin Regular; */
    font-size: 24px;
    line-height: 24px;
}


#img__wrap img {
    width: 100%;
    height: auto;
    /* display: inline-block; */
    float: left; /* no line after <img> */
    /* transition */
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

#img__wrap img:hover {
    /* filters for animation */
    -webkit-filter: brightness(70%);
    -moz-filter: brightness(70%);
    -o-filter: brightness(70%);
    -ms-filter: brightness(70%);
    filter: brightness(70%);
}



/* relevant styles */
.img__wrap {
  position: relative;
  height: 200px;
  width: 257px;
}

.img__description {
    position: absolute;
    top: 50%;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(29, 106, 154, 0.72);
    color: #fff;
    height: 40px;
    transform: translateY(-50%);
    text-align: center;
}

.img__wrap:hover .img__description {
  visibility: visible;
  opacity: 1;
}

.image-wrap {
  position: relative;
  width: 50%;
  float: left;
}

        <div id="banner">
            <img src="http://placehold.it/1920x1080"/>

            <div id="banner-text">
                <h1>Lorem ipsum dolor sit amet</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis ultrices tellus, at        vulputate risus.Cras convallis molestie libero, ac fringilla lacus lobortis ut.
                </p>
            </div>

        </div>


    <div id="img__wrap">
       <div class="image-wrap">
          <img class="img__img" src="http://placehold.it/952x512"/>
          <p class="img__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
       </div>
       <div class="image-wrap">
        <img class="img__img" src="http://placehold.it/952x512"/>
        <p class="img__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="image-wrap">
        <img class="img__img" src="http://placehold.it/952x512"/>
        <p class="img__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="image-wrap">
        <img class="img__img" src="http://placehold.it/952x512"/>
        <p class="img__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>

Answer 3

To make the banner text central in the banner you could try:

#banner-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 42px;
  color: #ffffff;
}

Its worth noting that the transform won't work on older versions of IE.