مدونة محمد عماد : اضافة تأثير CSS الى المشاركات الشائعة

السلام عليكم ورحمة الله تعالى وبركاته 

اليوم درسنا اضافة تأثير Css على صور المشاركات الشائعة.. الدرس خفيف وسريعة واحترافي كما هو واضح في الصورة السابقة ولاضافة هذه الخاصية قم باضافة المشاركات الشائعة عن طريق الذهاب الى >> تخطيط >> اضافة ادة ومن ثم اختر المشاركات الشائعة وعلم على صورة مصغرة ومقتطف صغير من الموضوع بعد اضافة المشاركات الشائعة اذهب الى قالب وخذ نسخة احتياطية للقالب ثم اذهب الى تحرير HTML وابحث عن ]]>  وضع هذه الكود قبلها مباشرة 

#PopularPosts1 { max-width: 300px} #PopularPosts1 dd { float: left; border-bottom: none; margin: 8px 8px 0 8px; background: none; display: block; padding: 0} #PopularPosts1 img { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; padding: 4px; background: #eee; background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa)); background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7); -moz-box-shadow: 0 0 3px rgba(0,0,0,.7); box-shadow: 0 0 3px rgba(0,0,0,.7);} #PopularPosts1 img:hover { -moz-transform: scale(1.2) rotate(-350deg); -webkit-transform: scale(1.2) rotate(-350deg); -o-transform: scale(1.2) rotate(-350deg); -ms-transform: scale(1.2) rotate(-350deg); transform: scale(1.2) rotate(-350deg); -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1); -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1); box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}