Try it Live

​x
 
<!DOCTYPE html>
<html>
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <style>
     .transbox1{ 
       background: rgba(13, 14, 10, 0.5); 
       color: yellow;
       transform: translate(1px,-170px);
       height:100%;
       width:100%;
     }
   </style>
 </head>
 <body>
   <h2>Text in Transparent Box inside an Image</h2>
   <img src="img/newborn-child-tutorialbrain.jpg" alt="Notebook" style="width:100%;">
   <div class="transbox1">
     <h3>What is Lorem Ipsum?</h3>
     <p> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing</p>
   </div>
 </body>
</html>
​