There is a gallery, when you hover over an image, you need to darken it, and an inscription (description) appears on it in the center. On each image, the inscription will be of different lengths so the option with a fixed position does not fit, it is impossible to make it in the center of this image (margin: 0 auto; does not work).

.overlay{ position: relative; display: block; } .overlay .overlayed_text{ display: none; } .overlay:hover .overlayed_text{ display: block; background-color: #8c8c8c; filter: alpha(opacity=75); opacity: .75; position: absolute; width: 471px; height: 237px; } .overlayed_text span{ display: block; padding-top: 30px; padding-bottom: 30px; padding-left: 10px; padding-right: 10px; color: #fff; font-weight: bold; border: 2px #fff solid; text-align: center; position: absolute; } 
 <div class="overlay"> <a href="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg" class="big"> <img src="http://www.irishcultureandcustoms.com/01News/18Surfer.jpg" alt="" title="小孝校袛袠携 小 携袪袣袠袦袠 袗袣笑袝袧孝袗袦袠"> <div class="overlayed_text"> <span>小孝校袛袠携 小 携袪袣袠袦袠 袗袣笑袝袧孝袗袦袠</span> </div> </a> </div>

    1 answer 1

    Think in layers if you use position. But do not forget that the parent must have position: relative in order for the child to work correctly in position: absolute.

     .big { display: block; position: relative; } .overlay { display: none; } .big:hover > .overlay { display: flex; } .overlay { position: absolute; left: 0; top: 0; width: 400px; height: 300px; background-color: #8c8c8c; filter: alpha(opacity=75); opacity: .75; } .overlayed_text { margin: auto; } .overlayed_text span{ display: block; padding: 30px 10px; color: #fff; font-weight: bold; border: 2px #fff solid; } /* ---- 斜械蟹 flex ---- */ .overlay2 { display: none; } .big:hover > .overlay2 { display: block; } .overlay2 { position: absolute; left: 0; top: 0; width: 400px; height: 300px; background-color: #8c8c8c; filter: alpha(opacity=75); opacity: .75; } .overlayed_text2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .overlayed_text2 span{ display: block; padding: 30px 10px; color: #fff; font-weight: bold; border: 2px #fff solid; white-space: nowrap; } 
     <a href="#" class="big"> <img src="http://beerhold.it/400/300"> <div class="overlay"> <div class="overlayed_text"><span>小孝校袛袠携 小 携袪袣袠袦袠 袗袣笑袝袧孝袗袦袠</span></div> </div> </a> <a href="#" class="big"> <img src="http://beerhold.it/400/300"> <div class="overlay2"> <div class="overlayed_text2"><span>小孝校袛袠携 小 携袪袣袠袦袠 袗袣笑袝袧孝袗袦袠</span></div> </div> </a>

    • Is there an option without using display: flex? - Vadim
    • Of course. Added code in response. - Andrey Fedorov