ハイブリッドメニューの背景効果

Question

Ionicでこのメニューの背景効果を作成しようとしていますが、これを再現するために何を使うべきかわかりません。まず

Link

私は不透明度を使用し、それは私の右の影響を与えるものではありません。私はぼかしも追加しましたが運はありません。

.menu-overlay { 
    height: 100%; 
    width: 100%; 
    position: fixed; 
    background: rgb(43,49,81); 
    -webkit-filter: blur(5px); 
    opacity: .8; 
} 

編集：アニメーションについては言及しません。

Answer 1

上記のソリューションでは、私のメニューが表示されているコンテンツ全体にぼかしフィルタを追加しました。要するに

：

<div id="menu"></div> 
<div id="content"> 
    <!-- content goes here --> 
</div> 

CSS

#menu{ 
opacity:0.9; 
} 
#content{ 
    filter: blur(4px); -webkit-filter: blur(4px); 
}