Tell me how to place the text on top of the image so that it is like in the picture?

<div class="works-image"> <img src="img/works_1.jpg" width="310px" alt=""> <img src="img/works_2.jpg" width="295px" alt=""> <img src="img/works_3.jpg" width="295px" alt=""> </div>

one]

    4 answers 4

    And the background is not an option?

     .works-image { background: url(https://404store.com/2017/09/17/Spa-still-life-with-bamboo-fountain-and-zen-stone.jpg); width: 33vw; height: 33vw; background-size: cover; } .works-image .overlay { width: 100%; height: 100%; display: flex; align-items: center; opacity: 0; justify-content: center; color: #fff; background-color: rgba(0, 0, 0, 0.4); font-family: "Montserrat", sans-serif; font-size: 3.5333333vw; transition:1s opacity; } .works-image:hover .overlay { opacity:1; } 
     <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700" rel="stylesheet"> <div class="works-image"> <div class="overlay"> <div class="content"> Текст </div> </div> </div> 

       .image { display: block; width: 300px; height: 300px; overflow: hidden; position: relative; } .image img { width: 100%; height: 100%; border: 0; object-fit: cover; } .image .text { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; } 
       <div class="image"> <img src="https://static.tumblr.com/3d9ac85fda4c928fbf020185e2aab0c5/ecuyhbw/inIon7mm9/tumblr_static_badr4s3xiooc4sosgokwosk0s_640_v2.jpg"> <div class="text">Title</div> </div>

      demo

      • one
        good answer (+) In my opinion, the larger text should be done and the white color should be chosen, otherwise it is completely lost in the grid - Alexandr_TT
      • @Alexandr_TT, it's all easily fixable, I just wrote the implementation) - CbIPoK2513

      Create a separate block with text
      and put the picture position: absolute

       .works-image { position: absolute; } 
       <div class="works-image"> <img src="img/works_1.jpg" width="310px" alt=""> <img src="img/works_2.jpg" width="295px" alt=""> <img src="img/works_3.jpg" width="295px" alt=""> </div> 

         .image { position: relative; width: 100%; /* для IE 6 */ } h2 { position: absolute; top: 466px; left: 0; width: 100%; } h2 span { color: #fff; font-size: 30px; line-height: 55px; background: rgba(0, 0, 0, 0.7); background: #000; padding: 10px 10px 10px 16px; } 
         <div class="image"> <img src="image.jpg" alt="" /> <h2><span>текст<br />поверх изображения</span></h2> </div>