سلام دوستان با کد زیر یه افکت به تصاویرم میدم
ولی وقتی اینو تو پیجم میزارم تغیرات رو کل پیجم انجام میشه و کل صفحه رو بهم میریزه در صورتی که من فقط میخوام رو تصویر زیر انجام بشه
باید چیکار کنم ؟
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>
آخرین ویرایش: