jksnf

Не работает transition при появлений модального окна:

<a class="btn">Modal</a>

<div class="modal">
	<div class="overlay">
    	<div class="content">
        	<a class="close">X</a>
            <h1>Title</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt repellat asperiores rerum animi officiis minus 					corporis iure voluptate accusantium, ut optio ratione iusto nemo delectus. Quasi illum libero dolorum neque?</p>
        </div>
    </div>
</div>

//scss
.modal .overlay{
    position: fixed;
    top: 0;left: 0;
    width: 100%;height: 100%;
    background: rgba($color: #000000, $alpha: .8);
    z-index: 1;
    display: none;
}
.modal .content{
    width: 500px;height: 200px;
    position: absolute;
    top: 50%;left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    z-index: 2;
    text-align: center;
 
    display: none;
    a{
        line-height: 30px;
        font-weight: bold;
        color: #fff;
        top: -50px;;
        position: absolute;
        right: -50px;
        font-size: 40px;
        padding: 10px;
    }
    h1{
        margin-bottom: 20px;
    }
}
.modal.active .overlay{
    display: block;
}
.modal.active .content{
    display: block;
}

//Jquery
$(document).ready(function(){
    $(".btn, .close").click(function() {
        $(".modal").toggleClass("active")
    })
})

Я понимаю что на display не работает transition. но и нельзя ставить opacity т.к перекрывает контент сзади него изначально.

Что делать?