Добрый день, я начинающий и уже неделю как мучаюсь с этим вопросом, сколько не изворачивался, а все равно затемняется все, а не "все кроме блока", z-index-сы везде прописал, перепроверил, но все равно так как прописано не отрабатывает, уже даже не знаю чтоб такое придумать, помогите, заранее спасибо.
Вот код:
<style type="text/css">
img{
width:100%;
}
header { font: 15px Verdana; height:10%;background-color: #F1F1F1;}
body {background-color: #F1F1F1; padding: 0; margin: 0; border: 0; }
.main {background-color: #F1F1F1; position: relative; height: 1500px; margin:0px 7% 0px 7%;}
.film {position: absolute; background-color:#ffffff; height:300px; width:200px; margin:30px; display: block;}
.film:hover{height:500px; width:300px;z-index:3;}
.shadow {box-shadow:0 1px 4px rgba(0, 0, 0, 0.4);}
#film1 {left: 0px; top:0px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease;}
#film1:hover{left: -50px; top:0px;}
#film2 {left: 260px; top:0px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease;}
#film2:hover {left: 210px; top:0px;}
#film3 {left: 520px; top:0px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease;}
#film3:hover {left: 470px; top:0px;}
.film:hover .ios{background-color: #000000; height: 100%; left: 0; opacity: 0.50; position: fixed; top: 0; width: 100%; z-index: 2; display: block;}
</style>
<body>
<header><img src='head.jpg' alt="" /></header>
<div class="main">
<div id = "film1" class="film shadow">1<div class = "ios"></div></div>
<div id = "film2" class="film shadow">2<div class = "ios"></div></div>
<div id = "film3" class="film shadow">3<div class = "ios"></div></div>
</div>
</body>
Простой
