بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
في هذه الحلقة سنتحدث تأثير تضبيب الصور و جعل الصور رمادية

css
a.item {
    overflow: hidden;
    display: block;
    margin: 15px auto;
    height: 160px;
    width: 160px;
    border:15px solid rgba(44, 62, 80,0.9)
}
a.item img {
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    -ms-transition: all 0.6s;
    -o-transition: all 0.6s;
    transition: all 0.6s;
}
a.item img.img1 {
    -webkit-filter:blur(4px);
}
a.item:hover img.img1 {
    -webkit-filter:blur(0);
}
a.item img.img2 {
    -webkit-filter:grayscale(100%);
}
a.item:hover img.img2 {
    -webkit-filter:grayscale(0);
}

3 تعليقات

  1. زين

    شكرا جدا لك افادتني كثير
    كيف اضع هذا الكود في قالب ووردبريس لكي اغير التأثيرات على الصور؟

    تحياتي لك

    • hijazi

      العفو اخي زين
      في القالب الخاص بك ستعدل ملف css
      لكن يجب عليك ان تعرف مثلا الكلاس الخاص بصورة التي تريد وضع التأثير عليها

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

يمكنك استخدام أكواد HTML والخصائص التالية: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>