Text on <img> using CSS - html

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

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 2

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.

Answer 3

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:
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).
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.