Responsive Design: Fließtext über Bild

Question

Ich habe noch die Antwort darauf zu finden. Ich habe ein div mit Bild, das mit wächst: hover. Ich möchte etwas Text überlagern, der während des Schwebens statisch ist und nicht mit dem Anchor-Tag interferiert. Ich brauche auch diesen Entwurf, um so zu reagieren, dass dann der Text immer in der Mitte des Bildes ist. Ich habe versucht Display: Table und Table-Cell ... Es gibt einen Teil meines CSS, der nicht mit allem übereinstimmt, was ich versuche.

Ich habe es geschafft, den Text innerhalb eines Absolute div zu platzieren, aber ich möchte nicht den genauen Pixelort des Textes angeben, da dieser nicht reagiert.

<style> 
#AOB{ 
height: 700px; 
position: relative; 
padding: 30px 200px 0px; 
} 


.innerBlock { 
float: left; 
display:block; 
position: relative; 
} 

#AOB .innerBlock { 
width: 33.2%; 
height: 50%; 
overflow:hidden; 
} 

#AOB img{ 
height:100%; 
width: 100%; 

} 

#AOB img:hover{ 
-webkit-transform:scale(1.05); 
-ms-transform:scale(1.05); 
transform:scale(1.05); 
transition: all 0.2s ease; 
} 


.innerBlockText{ 
position:absolute; 
top: 100px; 
left: 100px; 
z-index:1; 
} 



</style> 

<div id="AOB"> 
    <div id="one" class="innerBlock"> 
    <a href = "http://www.google.com"> 
    <div class="innerBlockText"> 
    beach 
    </div> 
    <img src="https://www.weebly.com/editor/uploads/2/1/6/7/21673280/custom_themes/537557073923231080/files/images/beach.png"> 
    </a> 
    </div> 

    <div id="two" class="innerBlock"> 
    <a href = "http://www.google.com"> 
    <img src="https://www.weebly.com/editor/uploads/2/1/6/7/21673280/custom_themes/537557073923231080/files/images/beach.png"> 
    </a> 
    </div> 

    <div id="three" class="innerBlock"> 
    <a href = "http://www.google.com"> 
    <img src="https://www.weebly.com/editor/uploads/2/1/6/7/21673280/custom_themes/537557073923231080/files/images/beach.png"> 
    </a> 
    </div> 

    <div id="four" class="innerBlock"> 
    <a href = "http://www.google.com"> 
    <img src="https://www.weebly.com/editor/uploads/2/1/6/7/21673280/custom_themes/537557073923231080/files/images/beach.png"> 
    </a> 
    </div> 

    <div id="five" class="innerBlock"> 
    <a href = "http://www.google.com"> 
    <img src="https://www.weebly.com/editor/uploads/2/1/6/7/21673280/custom_themes/537557073923231080/files/images/beach.png"> 
    </a> 
    </div> 

    <div id="six" class="innerBlock"> 
    <a href = "http://www.google.com"> 
    <img src="https://www.weebly.com/editor/uploads/2/1/6/7/21673280/custom_themes/537557073923231080/files/images/beach.png"> 
    </a> 
    </div> 



</div> 

Vielen Dank. In

Answer 1

.innerBlockText { 
    top: 50%; 
    transform: translate(-50%, -50%); 
    left: 50%; 
} 

(es in Ihrem Stromselektors Einlochen, natürlich). Der obere/linke 50% mmove es zu diesen Positionen in Bezug auf das Elternteil; Die Übersetzung bewegt sie in Bezug auf sich selbst und zentriert sie.

https://jsfiddle.net/9Lvmjt5g/4/