Transition animation to show hidden content - css

Question

I need to do something like Studio Up on the third slide, to show hidden content when I click the button, I need to do the same effect but I don't know how. Can someone help me, please? I have searched on the internet but found nothing.
This is my HTML, I don't know how to set CSS.
<div class="services">
<h2>Social Media</h2>
<div class="service-icon convers"></div>
<p>La comunicazione si è evoluta in conversazione. Siamo nati con questo cambiamento.</p>
<p class="answer">Inventiamo strategie e pensiamo comportamenti buoni (che valgono sempre).<br>
Studiamo ogni giorno nuovi strumenti e servizi</p>
e quindi?
indietro
</div>
Thank you so much.

Answer 1

When you click on .button-detail the class .answered will be added to .services, click on .button-back and the same class will be removed
$('.button-detail').on('click',function(){
$(this).parent().addClass('answered');
});
$('.button-back').on('click',function(){
$(this).parent().removeClass('answered');
});
then css will do the trick:
.services.answered .button-back {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
z-index: 10001
}
.services.answered .button-detail {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
transform: rotateX(180deg)
}
.services.answered .answer {
height: 12.5rem;
padding-top: 0.625rem;
opacity: 1
}
.services.answered p {
height: 0;
overflow: hidden;
margin: 0;
opacity: 0
}
.services.answered .service-icon {
height: 5rem;
margin-top: 0.625rem
}
.services {
text-align: center;
overflow: hidden;
position: relative;
padding-bottom: 55px;
color: #fff;
height: 360px
}
.services h2 {
font-size: 1.3125rem;
margin-top: 1rem
}
.services p {
margin: 0.625rem 0 0;
font-size: 16px;
font-weight: 100;
line-height: 1.1;
letter-spacing: 0.07rem;
height: 4.25rem;
font-family: "bariol-thin",helvetica,arial,sans-serif
}
.services .answer {
height: 0;
margin-top: 0;
margin-bottom: 0;
overflow: hidden;
font-size: 16px;
padding: 0.75rem 0.5rem 0;
line-height: 19px;
opacity: 0
}
.services .button {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
box-shadow: none!important;
font-family: "lato-regular",helvetica,arial,sans-serif;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
padding: 0.8125rem 0
}
.services .button:hover {
background-color: #FF6F5C
}
.services .button-back {
-webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
-o-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
transform: rotateX(-180deg);
background-color: #c2371f;
border-color: transparent
}
.services .button-back:hover {
background-color: #862f26
}
.services .button-detail {
z-index: 10000
}
.services p,.services .answer, .services .button, .services .service-icon {
-webkit-transition: all 1000ms ease-in-out;
-moz-transition: all 600ms ease-in-out;
-o-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out
}