10 تاثيرات رائعة للصور لمدونتك

بسم الله الرحمان الرحيم

اقدم لكم اليوم 10 تاثيرات رائعة على الصور جاهزة للتلركيب على مدونتك

10 تاثيرات تضفي على مدونتك رونقا وجمالا وابداعا لامتناهي تجذب دائما الزاشر اليك

نبدأ شرح تركيبها مع المعاينة الفورية للتاثير

التاثير الاول

الشفافية

ابحث عن الوسم التالي

]]></b:skin>

 واضف فوقه مباشرة

.post img{ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .post img:hover { opacity:0.7; filter:alpha(opacity=50); }

التاثير الثاني

زووم

ابحث عن الكود التالي

]]></b:skin>

 واضف فوقه مباشرة

.post img{ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; } .post img:hover { -o-transition: all 0.6s; -moz-transition: all 0.6s; -webkit-transition: all 0.6s; -moz-transform: scale(1.4); -o-transform: scale(1.4); -webkit-transform: scale(1.4); }

التاثير الثالث
الانعكاس

ابحث عن الكود التالي

]]></b:skin>

 واضف فوقه مباشرة

.post img{ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; } .post img:hover { opacity: 1; /*Reflection*/ -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4))); /*Glow*/ -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); box-shadow: 0px 0px 20px rgba(255,255,255,0.8); }

التاثير الرابع
امالة

ابحث عن الكود التالي

]]></b:skin>

 واضف فوقه مباشرة

.post img{ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; } .post img:hover { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); }

التاثير الخامس
التمويه

ابحث عن الكود التالي

]]></b:skin>

 واضف فوقه مباشرة

.post img{ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .post img:hover { -webkit-filter: blur(5px); }

التاثير السادس
دوران سريع

ابحث عن الكود التالي

]]></b:skin>

 واضف فوقه مباشرة

.post img{ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; } .post img:hover { border-radius: 50%; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }

التاثير السابع
درجات الرمادي

ابحث عن الكود التالي

]]></b:skin>

 واضف فوقه مباشرة

.post img{ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .post img:hover { -webkit-filter: grayscale(100%); }

التاثير الثامن
الاضاءة

ابحث عن الكود التالي

]]></b:skin>

 واضف فوقه مباشرة

.post img{ -webkit-filter: brightness(60%); -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .post img:hover { -webkit-filter: brightness(100%); }

التاثير التاسع
دوران 180 درجة

ابحث عن الكود التالي

]]></b:skin>

 واضف فوقه مباشرة

.post img { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .post img:hover { -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); -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); }

التاثير الاخير
تدوير بسرعة

ابحث عن الكود التالي

]]></b:skin>

 واضف فوقه مباشرة

.post img { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .post img:hover { -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); -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); }

ملاحظة بالنسية لاكواد التاثيرات فهي تؤثر فقط على الصور داخل التدوينة

ام اذا اردت ان تؤثر على كل الصور ما عليك سوى تغيير الكود التالي

.post img

بهذا الكود

.img

وهذا

.post img:hover

بهذا

.img:hover
ملاحظة
ان لم يشتغل تاثير ما فاعلم ان متصفحك لا يدعم هذا الكود

• غرّد
• شارك
• شارك
• شارك
• شارك