افکت به تصاویر

D

dezchilds

Member
سلام دوستان با کد زیر یه افکت به تصاویرم میدم

HTML: 
<style type="text/css">

{
body {
    color: #333;
    background-color: #eee;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: -0.1em;
}

img {
    display: block;
    background-color: #fff;
    padding: 5px 5px 20px 5px;
    -webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
    -moz-box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
    box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    transform: rotate(-3deg);
    border-top: 1px solid rgba(0,0,0,0.1);
    border-left: 1px solid rgba(0,0,0,0.1);
}

li:nth-child(odd) img {
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    transform: rotate(5deg);
}

img:hover {
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    transform: rotate(3deg);
    z-index: 10;
    position: relative;
    -webkit-box-shadow: 8px 8px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 8px 8px 5px rgba(0,0,0,0.2);
    box-shadow: 8px 8px 5px rgba(0,0,0,0.2);
    -webkit-transition: 0.2s, 0.2s;
    -moz-transition: 0.2s, 0.2s;
    transition: 0.2s, 0.2s;
}

li:nth-child(odd) img:hover {
    -webkit-transform: rotate(1deg);
    -moz-transform: rotate(1deg);
    transform: rotate(1deg);
}


/* just for presentation: not part of the effect */

ul {
    width: 300px;
    float: left;
}

li {
    display: block;
    float: left;
    margin-right: -2px;
    margin-bottom: -15px;
}

h2 {
    margin-bottom: 0;
}

div {
    float: left;
}

</style>



ولی وقتی اینو تو پیجم میزارم تغیرات رو کل پیجم انجام میشه و کل صفحه رو بهم میریزه در صورتی که من فقط میخوام رو تصویر زیر انجام بشه
HTML: 
 <li><a href="{top.virtual_path}{picture_link}">
<img src="{top.virtual_pic_path}{top.member_media_path}{picture_preview}" alt="" border="0"/><br /></a></li>
باید چیکار کنم ؟
 
آخرین ویرایش:
برای ارسال پاسخ شما باید وارد سیستم شوید.

آخرین مطالب مجیدآنلاین

جدیدترین ارسال ها

بالا