CsharpNevisi
دوشنبه 19 خرداد 1393, 11:14 صبح
به این یه نیگا بنداز :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mohsen fathi</title>
<style>
*
{
padding:0px;
margin:0px;
direction:rtl;
}
#SmallItem
{
float:right;
width:150px;
height:150px;
background-image:linear-gradient(rgb(0,189,0),rgb(0,181,255));
margin-top:40px;
margin-right:40px;
cursor:pointer;
}
#SmallItemHover
{
width:100%;
height:100%;
background:#000;
opacity:0;
transition:all 500ms ease-in-out 0s;
-moz-transition:all 500ms ease-in-out 0s;
-ms-transition:all 500ms ease-in-out 0s;
-o-transition:all 500ms ease-in-out 0s;
-webkit-transition:all 500ms ease-in-out 0s;
}
#SmallItem:hover #SmallItemHover
{
opacity:0.30;
}
#LightBox
{
width:100%;
height:2000px;
background:#000;
opacity:0.50;
top:0px;
position:fixed;
}
#LightBoxItem
{
width:500px;
height:500px;
position:absolute;
margin-top:100px;
margin-right:30%;
background-image:linear-gradient(rgb(35,10,120),rgb(150,0,255));
}
</style>
<script src="http://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#LightBox").fadeOut(1);
$(".SmallItemHover1LightBox").fadeOut(1);
$(".SmallItemHover1").click(function(){
$("#LightBox").fadeIn(1000);
$(".SmallItemHover1LightBox").fadeIn(1000);
});
});
</script>
</head>
<body>
<!-- --------------------- ایتم های کلیک شونده ------------------ -->
<div id="SmallItem">
<span style="float:right; color:#FFF;">
فقط برای این کد نمایش نوشتم
</span><div id="SmallItemHover" class="SmallItemHover1">
</div>
</div>
<div id="SmallItem">
<div id="SmallItemHover">
</div>
</div>
<div id="SmallItem">
<div id="SmallItemHover">
</div>
</div>
<div id="SmallItem">
<div id="SmallItemHover">
</div>
</div>
<div id="SmallItem">
<div id="SmallItemHover">
</div>
</div>
<div id="SmallItem">
<div id="SmallItemHover">
</div>
</div>
<div id="SmallItem">
<div id="SmallItemHover">
</div>
</div>
<!-- --------------------- ایتم های کلیک شونده ------------------ -->
<!-- --------------------- باکس شفاف مشـــــکی ------------------ -->
<div id="LightBox">
</div>
<!-- --------------------- باکس شفاف مشـــــکی ------------------ -->
<!-- --------------------- ایتم های جزئـــییات ------------------ -->
<div id="LightBoxItem" class="SmallItemHover1LightBox">
</div>
<!-- --------------------- ایتم های جزئـــییات ------------------ -->
</body>
</html>
تو ند پد کپی کن و با پسوند اچ تی ام ال ذخیره کن