JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Moj przyklad</title>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,600,700,900" rel="stylesheet">
</head>
<body>

  <section class="services">
        <div class="serviceBox">
            <div class="serviceBoxInner">
                <h2>Nazwa kategorii 1</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse impedit, nobis neque vitae rerum cumque.</p>
            </div>
            <!--service box inner -->
        </div>
        <!--service box -->
        <div class="serviceBox">
            <div class="serviceBoxInner">
                <h2>Nazwa kategorii 2</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse impedit, nobis neque vitae rerum cumque.</p>
            </div>
            <!--service box inner -->
        </div>
        <!--service box -->
        <div class="serviceBox">
            <div class="serviceBoxInner">
                <h2>Nazwa kategorii 3</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse impedit, nobis neque vitae rerum cumque.</p>
            </div>
            <!--service box inner -->
        </div>
        <!--service box -->
    </section>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
    
</body>

</html>

CSS

/*GENERAL STYLES*/

body,h1,h2,h3,h4,h5,h6 {
    font-family: 'Montserrat', sans-serif;  
}

body {
    background-color: #f2f3f7;    
}

p {
line-height:1.4em;
font-weight: normal;
}



/*SERVICES */

.services {
display:flex; 
flex-flow: row wrap;
}

.serviceBox {
flex:1;  
height: 400px;
display:flex;
justify-content: center;
align-items: center;
overflow:hidden;
}

.serviceBox:first-child {
background-image: url(https://images.unsplash.com/photo-1588951095663-2f5fbc187720?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);    
}

.serviceBox:nth-child(2) {
background-image: url(https://images.unsplash.com/photo-1588988276031-8b1422b8b4f2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);    
}

.serviceBox:nth-child(3) {
background-image: url(https://images.unsplash.com/photo-1588992370249-1b0fcaf6249b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);    
}

.serviceBoxInner {
background-color: rgba(255,255,255,0.8);
padding: 25px;
text-align: center;
}

.serviceBoxInner h2 {

}

JavaScript

TweenMax.set('.serviceBoxInner', { y:200, opacity: 0 });

$('.serviceBox').hover(function() {
  TweenMax.to($(this).find('.serviceBoxInner'), 0.5, { y: 0, opacity: 1,
  ease: Power2.easeOut });
},
function() {
  TweenMax.to($(this).find('.serviceBoxInner'), 0.5, { y: 200, opacity: 0 });
});