HTML/CSSのホバーが意図したとおりに動作しない

Question

ホバーでそのようにしようとしていますが、divがぼやけて、さらにdivが表示されます。

がここにJSFiddleです：https://jsfiddle.net/vmqmbx94/

スニペット：ご覧のとおり

@import url(http://fonts.googleapis.com/css?family=Lato:300,500); 
 

 
/* 
 
    pad the body and set default font styles 
 
*/ 
 
body { 
 
\t font: 300 16px/1.2 Lato; 
 
\t background-image: url('resource/images/witewall_3.png'); 
 
} 
 

 
.menu { 
 
\t width: 100%; 
 
\t height: 50px; 
 
\t border-bottom: 1px solid #999; 
 
} 
 
/* 
 
    navigation 
 
*/ 
 
.nav { 
 
\t list-style: none; 
 
\t font-size: 20px; 
 
} 
 

 
/* 
 
    nav list items 
 
    1. side by side 
 
    2. needed for circle positioning 
 
*/ 
 
.nav li { 
 
\t float: left; /*1*/ 
 
} 
 

 
/* 
 
    nav link items 
 
*/ 
 
.nav>li a { 
 
\t display: block; /*1*/ 
 
\t padding: 12px 18px; /*2*/ 
 
\t text-decoration: none; /*3*/ 
 
\t color: #999; /*4*/ 
 
\t transition: all ease .5s; 
 
} 
 

 
/* 
 
    fade out all links on ul hover 
 
*/ 
 
.nav:hover>li a { 
 
\t opacity: .5; 
 
\t transition: all ease .5s; 
 
} 
 

 
/* 
 
    override previous rule to highlight current link 
 
*/ 
 
.nav>li:hover a { 
 
\t opacity: 1; 
 
\t color: #E74C3C; 
 
\t border-color: #E74C3C; 
 
} 
 

 
.container { 
 
\t width: 1500px; 
 
\t height: 800px; 
 
\t margin: auto; 
 
\t margin-top: 50px; 
 
} 
 

 
.games { 
 
\t width: 400px; 
 
\t height: 300px; 
 
\t float: left; 
 
\t background-image: url('resource/images/ryu_sfv.jpg'); 
 
\t background-size: 600px; 
 
\t background-position: 50%; 
 
\t background-repeat: no-repeat; 
 
\t box-shadow: inset 0 0 90px #999, inset 5px 0 10px #999, inset -5px 0 
 
\t \t 10px #999, inset 5px 0 10px #999, inset -5px 0 40px #999, 0 0 50px 
 
\t \t #999, -5px 0 0px #999, 5px 0 0px #999; 
 
\t -webkit-transition: width 3s; /* Safari */ 
 
\t -webkit-transition-delay: 1s; /* Safari */ 
 
\t transition: .3s; 
 
} 
 

 
.games:hover { 
 
\t filter: blur(5px); 
 
\t -webkit-filter: blur(5px); 
 
\t -moz-filter: blur(5px); 
 
\t -o-filter: blur(5px); 
 
\t -ms-filter: blur(5px); 
 
\t -o-filter: blur(5px); 
 
} 
 

 
.games:hover .title { 
 
\t diplay: block; 
 
} 
 

 
.title { 
 
\t width: 400px; 
 
\t height: 50px; 
 
\t background-color: white; 
 
\t margin-top: 250px; 
 
\t text-align: center; 
 
\t display: none; 
 
}

<div class="menu"> 
 
    <ul class="nav"> 
 
    <li><a href="./">Home</a><i class="circle"></i></li> 
 
    <li><a href="./games">Games</a></li> 
 
    <li><a href="./players">Players</a></li> 
 
    <li><a href="">News</a></li> 
 
    <li style="float: right"> 
 
     <a href="./login">Login/Sign up</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<div class="container"> 
 
    <div class="games"> 
 
    <div class="title">STREET FIGHTER</div> 
 
    </div> 
 
</div>

、divがホバーにぼかしが、他の一つは全くホバーに表示されません。

私はクラスgamesをぼかすようにしようとしていて、クラスtitleは表示されますが、ぼやけません。

希望の結果を得るにはどうすればよいですか？私は間違って何をしていますか？

PS：HTML/CSSの質問を編集する方法がわからないので、誰かが自分のコードブロックを調整したい場合は、先に進んでください。

Answer 1

あなたにはあなたのタイプミスがあります。diplay: block;あなたにはあなたがいません。

Answer 2

Answer @Alesはあなたの問題を解決し、私はあなたが求めていたので、その答えをupvoteします。しかし、タイトルをぼかすかどうか分からないが、もしそうでなければ、下のリンクのようなZ-Indexを使って遊ぶことができるのかどうか分からない（私はちょっと面白くて面白い）。

フィドル：https://jsfiddle.net/5s33ckzz/

基本的にはちょうどいくつかのHTMLの変更：

<div class="container"> 
    <div class="inner-wrapper"> 
    <div class="games"></div> 
    <div class="title">STREET FIGHTER</div> 
    </div> 
</div> 

をとフィドルのようにz軸のインデックスを設定します。