Как поместить мой контент в my :: before для отображения информации при наведении

Question

Мне нужно поместить информацию внутри контента, который создается в псевдоклассе :: before, а затем показать информацию и, наконец, скрыть контент, я знаю, что мне нужно переполнение: hidden для скрытия кон tnet, мой Настоящая проблема - показать следующий контент: h2 и 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

вставляет текст в контент при наведении курсора

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