Transition animation to show hidden content


Tags: css3,animation,css-transitions,show-hide

Problem :

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>
    <a href="#" class="button radius button-detail">e quindi?</a> 
    <a href="#" class="button radius alert button-back">indietro</a>
</div>

Thank you so much.



Solution :

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
}

    CSS Howto..

    How slow are CSS media-queries?

    How to stretch segment of image in html/css

    How to set angular json model into css

    How to add padding and border that doesn't change width if using 960 grid system

    How do i remove li element margin

    How to stop text from overlapping CSS?

    How to upload image to an existing image src in angularjs, css

    How to output element.style.marginTop using digits only?

    How make my CSS responsive using Bootstrap 3.1

    How to get css 3 column layout with floats and no margins?

    How to add multiple CSS styles to an element with .css()

    CSS - How to show only a % of the top div with two identicals divs stacked over each other

    How to prevent mobile device to resize and use proper css file

    How to increase Page Width with the Help of CSS?

    How to animate text with css font-weight property in jQuery ? normal to bold

    In css how to display multiple divs?

    How specify two css classes: from property and conditional class

    HTML or CSS, how is this done? [closed]

    How to local storage expand/collapse CSS settings

    How to get Google menu buttons like styling using CSS

    how to apply css to web app?

    How can I prevent a bookmark from changing style when moving the cursor over it?

    How can I put two divs shaped as circles next to each other?

    Why not show class css in email when using mail() php send mail to gmail?

    How can I write more efficient CSS for the max-width

    CSS selectors: how to make element hovering change wrapper's style

    How to add bootstrap css to my Wordpress plugin

    How to edit and see live CSS effect in IE8 like we see in Firefox > Web developer toolbar > Edit CSS function?

    How do I get an html/css form to post to Gravity Forms?

    How to configure css flexbox so height of one of the block depends on it content?