How can I place text on top of flexible images? - html

Question

friends!
I`m trying to make a grid of flexible images that come in a row. I dont even need additional div properties for that, works fine as is
<div class="container_imggrid"> <img> </div>
Css
.container_imggrid img {
display: inline-block;
max-width: 25%;
height: auto;
}
But now i need to add text above my picture, Div with text should be flexible as well.
U can see what i mean at this page http://www.reebok.com/us. That big image with "start designing" sign is flexible until some point, as well as text above it.
I need similar Header properties for my grid elements, but cant position my text block properly.
Can you please help me? Maybe i need absolutely another grid basis for such features?
My interactive fiddle is here: https://jsfiddle.net/CapablancaYEAH/yr809ty8/
P.S. To make things more clear, let me re-phrase.
I need a flexible grid.
Each separate block of grid is Square DIV with image inside and centered header on top of image.
Image should be resized and fit accordingly to div`s width/height (browser window size change).
Header should remain centered with div after any browser window resize.

Answer 1

Just set position:relative to parent div and position:absolute with top and left 50% for h2 tag.
.container_banner{position:relative;}
.container_banner img{width:100%;height:auto;}
.container_banner h2{position: absolute;
right: 0;
width: 50%;
left: 0;
margin: 0 auto;
text-align: center;
top: 44%;}
.container_imggrid{width:25%;}
<div class="container">
<div class="container_banner">
<h2>Swimming</h2>
<img src="https://i.yapx.ru/JEvD.jpg" width="1000" height="300">
</div>
<div class="container_imggrid container_banner">
<h2>Swimming</h2>
<img src="https://i.yapx.ru/JEvC.jpg" width="500" height="500" alt="Подводное плавание">
</div>
</div>
Make sure your parent div width is same as your <img> tag with. It should be same otherwise you need to set your image in background inside the parent div.
Hope this will helpful for you.
Thanks.

Answer 2

Using position: relative (for parent) and position: absolute (for child)
https://jsfiddle.net/kaskull/yr809ty8/4/

Answer 3

You can use media queries at each stage to manipulate the text size at different screen sizes like:
#media only screen and (min-width: 360px){
.flx-text{
font-size:1em;
}
}
Example Fiddle (try resizing for effect):
JSFIDDLE
Snippet [Go full screen and resize for effect]:
.container_banner {
padding-bottom: 15px;
}
.container_banner img {
max-width: 100%;
height: auto;
}
.container_imggrid img {
display: inline-block;
max-width: 25%;
height: auto;
}
.container_imggrid h2 {
display: block;
position: fixed;
max-width: 50%;
}
#media only screen and (min-width: 360px) {
.flx-text {
font-size: 0.9rem
}
}
#media only screen and (min-width: 390px) {
.flx-text {
font-size: 1.0rem
}
}
#media only screen and (min-width: 420px) {
.flx-text {
font-size: 1.1rem
}
}
#media only screen and (min-width: 450px) {
.flx-text {
font-size: 1.2rem
}
}
#media only screen and (min-width: 480px) {
.flx-text {
font-size: 1.3rem
}
}
#media only screen and (min-width: 510px) {
.flx-text {
font-size: 1.4rem
}
}
#media only screen and (min-width: 540px) {
.flx-text {
font-size: 1.5rem
}
}
#media only screen and (min-width: 570px) {
.flx-text {
font-size: 1.6rem
}
}
#media only screen and (min-width: 600px) {
.flx-text {
font-size: 1.7rem
}
}
#media only screen and (min-width: 630px) {
.flx-text {
font-size: 1.8rem
}
}
#media only screen and (min-width: 660px) {
.flx-text {
font-size: 1.9rem
}
}
#media only screen and (min-width: 690px) {
.flx-text {
font-size: 2.0rem
}
}
#media only screen and (min-width: 720px) {
.flx-text {
font-size: 2.1rem
}
}
#media only screen and (min-width: 750px) {
.flx-text {
font-size: 2.2rem
}
}
#media only screen and (min-width: 780px) {
.flx-text {
font-size: 2.3rem
}
}
#media only screen and (min-width: 810px) {
.flx-text {
font-size: 2.4rem
}
}
#media only screen and (min-width: 840px) {
.flx-text {
font-size: 2.5rem
}
}
#media only screen and (min-width: 870px) {
.flx-text {
font-size: 2.6rem
}
}
#media only screen and (min-width: 900px) {
.flx-text {
font-size: 2.7rem
}
}
#media only screen and (min-width: 930px) {
.flx-text {
font-size: 2.8rem
}
}
#media only screen and (min-width: 960px) {
.flx-text {
font-size: 2.9rem
}
}
#media only screen and (max-width: 360px) {
.flx-text {
font-size: 0.8rem
}
}
<div class="container">
<div class="container_banner">
<img src="https://i.yapx.ru/JEvD.jpg" width="1000" height="300">
</div>
<div class="container_imggrid">
<h2 class="flx-text">Swimming</h2>
<img src="https://i.yapx.ru/JEvC.jpg" width="500" height="500" alt="Подводное плавание">
</div>
</div>

Answer 4

After all, I was able to figure out a solution. It uses a trick with
font-size: 0;
see https://jsfiddle.net/CapablancaYEAH/68aqv37b/