<section class="section_offer">
    <div class="container">
        <div class="offer">
          <div class="offer_card">
                <div class="offer_card_front offer_item_2" >
                    <div class="offer_body">
                       <h2>Что-то</h2>
                    </div>
                    <div class="offer_footer">
                        <a class="btn_more" href="#">Подробнее</a>
                    </div>
                </div>
                <div class="offer_card_back">
                    <div class="offer_card_back__description">
                        
                        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illum, pariatur? Consequuntur, tenetur minus quia consectetur perferendis, voluptas nobis asperiores molestiae praesentium quasi ex porro harum blanditiis. Architecto vero obcaecati error blanditiis voluptatum. Dolores, adipisci reprehenderit eligendi fuga id iste. Quis, alias. Tenetur praesentium voluptate quibusdam saepe a.</p>
                    </div>
                </div>
            </div>  
          
            <div class="offer_card">
                <div class="offer_card_front offer_item_2" >
                    <div class="offer_body">
                       <h2>Что-то</h2>
                    </div>
                    <div class="offer_footer">
                        <a class="btn_more" href="#">Подробнее</a>
                    </div>
                </div>
                <div class="offer_card_back">
                    <div class="offer_card_back__description">
                        
                        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illum, pariatur? Consequuntur, tenetur minus quia consectetur perferendis, voluptas nobis asperiores molestiae praesentium quasi ex porro harum blanditiis. Architecto vero obcaecati error blanditiis voluptatum. Dolores, adipisci reprehenderit eligendi fuga id iste. Quis, alias. Tenetur praesentium voluptate quibusdam saepe a.</p>
                    </div>
                </div>
            </div>
            <div class="offer_card">
                <div class="offer_card_front offer_item_2" >
                    <div class="offer_body">
                       <h2>Что-то</h2>
                    </div>
                    <div class="offer_footer">
                        <a class="btn_more" href="#">Подробнее</a>
                    </div>
                </div>
                <div class="offer_card_back">
                    <div class="offer_card_back__description">
                        
                        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illum, pariatur? Consequuntur, tenetur minus quia consectetur perferendis, voluptas nobis asperiores molestiae praesentium quasi ex porro harum blanditiis. Architecto vero obcaecati error blanditiis voluptatum. Dolores, adipisci reprehenderit eligendi fuga id iste. Quis, alias. Tenetur praesentium voluptate quibusdam saepe a.</p>
                    </div>
                </div>
            </div>
          
        </div>
    </div>
</section>

.offer{
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  text-align: center;
}
.offer .offer_card{
  margin: 30px;
  width: 300px;
  height: 300px;
  background-color: #843aaf;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}
.offer .offer_card:first-child{
  background-color: #e06262;
}

.offer .offer_card:last-child{
  background-color: #4878c4; 
}

.offer_card_back{
  position: absolute;
  top: -880px;
  padding: 20px 30px;
  transition: all 0.3s ease;
}



.offer_card_back_active {
  top: 10px;
}

$('.btn_more').on('click', function(e){
        e.preventDefault();
        $(this).parents(".offer_card").find('.offer_card_back').addClass("offer_card_back_active")
    });