<!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> Div'e opacity verdiğim de içindekiler de etkileniyor ?
6
●5.432
- 04-07-2013, 03:00:23
Üyeliği durdurulduArkadaşlar merhaba CSS ile bir dive opacity veriyorum lakin içerisinde ki yazı ve imajlarında opacityi düşüyor bu sorunu nasıl halledebilirim ?
- 04-07-2013, 03:17:47 Üyeliği durdurulduHocam şöyle söyleyeyimCemaLi adlı üyeden alıntı: mesajı görüntüle
Arkaplan siyah ama opacity li yani arkasındaki resim biraz olsun gözüküyor, üzerine ise göz at resmi yerleştirdim tıkladığımda resmin orjinalini gösteriyor ama benim yapmak istediğim arkasındaki resim de az görünsün ve üstüne eklediğim göz at butonuda şeffaf olmasın
bu arada yorumunuz için teşekkür ederim
- 04-07-2013, 09:49:56En etkili yol bu arkaplan gradientli falansa da işe yarar css3 sayesinde, öbür türlü arkaplanı png ile transparan yapmak gerekir ki basit bir arkaplansa gereksiz.jebias adlı üyeden alıntı: mesajı görüntüle
- 04-07-2013, 09:50:27http://codepen.io/CemaLi/pen/awdpJ
böyle birşey hazırladım belki işine yarayabilir, senin dışında da bir çok kişinin de işini görür diye düşünüyorum, div içerisinde küçük resim hem üst hem soldan kendini merkezliyor bu tüm tarayıcılarda uyumlu olarak çalışıyor.
