Arkadaşlar merhaba CSS ile bir dive opacity veriyorum lakin içerisinde ki yazı ve imajlarında opacityi düşüyor bu sorunu nasıl halledebilirim ?
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Responsive Web Design</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
});
</script>
<style type="text/css">
img {width:200px;height:200px;box-shadow:1px 1px 5px #ccc;}
ul {
padding:0;
margin:0;
list-style:none;
}
li {
float:left;
margin-right:20px;
margin-bottom:50px;
position:relative;
cursor:pointer;
}
.box{
z-index:10;
position:absolute;
background:#000;
width:100%;
opacity:0.7;
height:100%;
transition:opacity .9s;
line-height:320px;
font-size:40px;
color:#fff;
text-align:center;
}
li:hover .box {
opacity:0;
}
.look {
width:128px;
height:128px;
box-shadow:none;
opacity:1;
}
</style>
</head>
<body>
<ul>
<li>
<div class="box"><img src="look.png" alt="" class="look"/></div>
<img src="resim.jpg" alt="" />
</li>
<li>
<div class="box">Göz At!</div>
<img src="resim.jpg" alt="" />
</li>
<li>
<div class="box">Göz At!</div>
<img src="resim.jpg" alt="" />
</li>
<li>
<div class="box">Göz At!</div>
<img src="resim.jpg" alt="" />
</li>
<li>
<div class="box">Göz At!</div>
<img src="resim.jpg" alt="" />
</li>
<li>
<div class="box">Göz At!</div>
<img src="resim.jpg" alt="" />
</li>
<li>
<div class="box">Göz At!</div>
<img src="resim.jpg" alt="" />
</li>
<li>
<div class="box">Göz At!</div>
<img src="resim.jpg" alt="" />
</li>
</ul>
</body>
</html>