نویسنده : میدوری
میدوری
مدالهای میدوری
دسترسی به میدوری
اطلاعات میدوری
تاریخ عضویت: 05 November 2011
ارسال ها:
1,800
شماره کاربری:
1 میزان
اعتبار:
محل سکونت:
تهران
ماه تولد:
جنسيت:
آخرین دیدار :
تماس با میدوری
حالت میدوری
صفحه های میدوری
بزرگ نمایی زیبا و ابتکاری تصاویر با CSS3 (طرح چهارم)
بزرگ نمایی زیبا و ابتکاری [b]تصاویر با CSS3 (طرح چهارم)[/b]
بزرگ نمایی تصاویر بصورتی زیبا و تکنیکی با استفاده از کدهای CSS . نمونه ی زنده را در زیر ببینید و سپس برای بررسی و استفاده , از کد های داده شده استفاده کنید . تغییرات بعهده ی شماست .
کد HTML:
<style type = "text/css" >
.enlarge {position:relative; width:180px; height:240px; margin:20px 0 200px 10px;}
.frame {width:270px; height:360px; position:absolute; left:-9999px; top:0; opacity:0; overflow:hidden;
-webkit-transition: opacity 0.5s, left 0s 0.5s;
-moz-transition: opacity 0.5s, left 0s 0.5s;
-ms-transition: opacity 0.5s, left 0s 0.5s;
-o-transition: opacity 0.5s, left 0s 0.5s;
transition: opacity 0.5s, left 0s 1s;
}
.frame img {left: -134px; top: -181px; position:absolute;
-webkit-transition: 0s 3600s;
-moz-transition: 0s 3600s;
-ms-transition: 0s 3600s;
-o-transition: 0s 3600s;
transition: 0s 3600s;
}
.frame .inner {position:absolute; left:0; top:0; width:270px; height:360px;
box-shadow: inset 0px 0px 15px rgba(0,0,0,0.9);z-index:100;}
.enlarge .area {width:88px; height:118px; background:#fff; opacity:0.5; border:1px solid #000;
position:absolute; left:45px; top:60px; z-index:50; display:none;
-webkit-transition: 0s 3600s;
-moz-transition: 0s 3600s;
-ms-transition: 0s 3600s;
-o-transition: 0s 3600s;
transition: 0s 3600s;
}
img.control {position:absolute; display:none; width:32px; height:32px; z-index:100;}
img.up {left:74px; top:72px;}
img.down {left:74px; top:136px;}
img.left {left:42px; top:104px;}
img.right {left:106px; top:104px;}
img.dtl {left:42px; top:72px;}
img.dtr {left:106px; top:72px;}
img.dbl {left:42px; top:136px;}
img.dbr {left:106px; top:136px;}
img.ctr {left:74px; top:104px;}
.enlarge:hover .control {display:block;}
.enlarge:hover .area {display:block;}
.enlarge:hover .frame {left:250px; opacity:1;
-webkit-transition: opacity 0.5s, left 0s;
-moz-transition: opacity 0.5s, left 0s;
-ms-transition: opacity 0.5s, left 0s;
-o-transition: opacity 0.5s, left 0s;
transition: opacity 0.5s, left 0s;
}
img.control:active ~ div.frame img {
-webkit-transition: 1.5s linear;
-moz-transition: 1.5s linear;
-ms-transition: 1.5s linear;
-o-transition: 1.5s linear;
transition: 1.5s linear;
}
img.control:active ~ div.area {
-webkit-transition: 1.5s linear;
-moz-transition: 1.5s linear;
-ms-transition: 1.5s linear;
-o-transition: 1.5s linear;
transition: 1.5s linear;
}
img.up:active ~ div.frame img {top:0;}
img.down:active ~ div.frame img {top:-360px;}
img.left:active ~ div.frame img {left:0;}
img.right:active ~ div.frame img {left:-270px;}
img.dtl:active ~ div.frame img {top:0; left:0;}
img.dtr:active ~ div.frame img {top:0; left:-270px}
img.dbl:active ~ div.frame img {top:-360px; left:0;}
img.dbr:active ~ div.frame img {top:-360px; left:-270px;}
img.ctr:active ~ div.frame img {top:-180px; left:-135px;}
img.up:active ~ div.area {top:0;}
img.down:active ~ div.area {top:120px;}
img.left:active ~ div.area {left:0;}
img.right:active ~ div.area {left:90px;}
img.dtl:active ~ div.area {top:0; left:0;}
img.dtr:active ~ div.area {top:0; left:90px}
img.dbl:active ~ div.area {top:120px; left:0;}
img.dbr:active ~ div.area {top:120px; left:90px;}
img.ctr:active ~ div.area {top:59px; left:44px;}
</style>
<br> <br>
<div class ="enlarge">
<img src = "statue-small.jpg" alt = "" >
<img class ="control up" src="up.png" alt="">
<img class ="control down" src="down.png" alt="">
<img class ="control left" src="left.png" alt="">
<img class ="control right" src="right.png" alt="">
<img class ="control dtl" src="dtl.png" alt="">
<img class ="control dtr" src="dtr.png" alt="">
<img class ="control dbl" src="dbl.png" alt="">
<img class ="control dbr" src="dbr.png" alt="">
<img class ="control ctr" src="ctr.png" alt="">
<div class ="area"></div>
<div class ="frame"><img src = "statue.jpg" alt = "" > <div class ="inner"></div> </div>
</div>
<br> <br>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94
( آخرین ویرایش در این ارسال: 08 - October - 2014 57 : 12 PM، توسط : میدوری .::. دلیل ویرایش: )
محل حضور کاربر در تالار : میدوری در تالار ميدوری حضور ندارد .
ديدگاه کاربران برای مطلب : (روی آیکون مورد نظر کلیک کنید تا دیدگاه شما ثبت شود . در صورت انصراف تا دوبار می توانید دیدگاه خود را ثبت کنید . برای پاک کردن دیدگاه روی همان آیکون یک بار کلیک کنید تا دیدگاه شما پاک شود .)
برچسب ها :
08 - October - 2014 47 : 12 PM