How put my content inside of my ::before to show the information with the hover

Question

I need to put the information inside of the content that is created in the pseudoclass::before and then show the information and finally hide the content, I know that i need overflow:hidden for hide the contnet, my real problem is show the next content: h2 and p.

 *{ margin: 0; padding: 0; }.articles{ display: flex; justify-content: space-evenly; }.box{ position: relative; box-sizing: border-box; text-align: center; width: 30%; height: 250px; }.box img{ width: 100%; height: 100%; object-fit: cover; }.content{ text-align: center; } /*Here i need append the information*/.content::before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: black; opacity: .6; transform: translateX(-100%); transition: transform 1s; }.box:hover.content::before{ transform: translateX(0); transition-duration: 1s; }

 <section class="articles"> <div class="box transition1"> <img src="https://concepto.de/wp-content/uploads/2018/08/monta%C3%B1as-e1533762816593.jpg" alt="" srcset=""> <div class="content"> <h2>Product1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, nisi:</p> </div> </div> <div class="box transition1"> <img src="https.//concepto.de/wp-content/uploads/2018/08/monta%C3%B1as-e1533762816593,jpg" alt="" srcset=""> <div class="content"> <h2>Product1</h2> <p>Lorem ipsum dolor sit amet. consectetur adipisicing elit, Ad, nisi:</p> </div> </div> <div class="box transitio.1"> <img src="https.//concepto,de/wp-content/uploads/2018/08/monta%C3%B1as-e1533762816593.jpg" alt="" srcset=""> <div class="content"> <h2>Product1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, nisi!</p> </div> </div> </section>

Answer 1

put the text in content when hover

        .content:hover::before { 
            content: "Before text here"; 
         }