التخطي إلى المحتوى الرئيسي

اخفاء صورة تحت اخرى ب css3 بلوجر

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

اليوم اقدم لكم تأثير اكثر من رائع للصور فى مدونة بلوجر فهذا التأثير يعتمد على اخفاء صورة تحت اخرى و بمجرد مرور الماوس تظهر الصورة المخفية بشكل رائع و انيق و يمكن اضافتها فى مكان فى المدونة لاعطاء مظهر جمالى رائع .

Css3+Peel+Image+Effect

تركيب الاضافة 


1. ادخل الى لوحة تحكم بلوجر ثم اختار layout او تخطيط


blog-post-option


 

2. اختر اداة html/javascript
3. الصق الكود التالى

<style type="text/css"> a.nowandthen{ position:relative; display: block; overflow:hidden; cursor: pointer; width: 650px; height: 434px; } a.nowandthen img{ position:absolute; left:0; top:0; width: 100%; height: 100%; -moz-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; transition: all 0.4s ease; z-index: 2; clip: rect(0,650px,434px,0); } a.nowandthen img:nth-of-type(2){ z-index: 1; } a.nowandthen:hover img:nth-of-type(1){ clip: rect(0,0,434px,0); opacity: 0; } </style> <a class="nowandthen" href="http://www.blogger.com/null"> <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDK-7o1wO86m7stcjtBYO30bnawjMGy4xFNNbE74DtvFqRbeRhrsMQnV4QOUqmkfehc8c2X6vZWKgl_YfsmZbZdSZbv4tTzKybKiQ_IhNGHMnrxoydowiwi1cmMlDqzdp5rsGSM4EkQDQ/s1600/sunset-sunrise-btrix+(1).jpg" /> <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHnbiya1naFwL2AtYHi6mThwq2BbdV-hForjykHEVzDNT-SHCC3Fnc9OaRG4fIf1oh9KvoZJ-JFjelmfxaYwZXNlGbSITE0MRXfuu4OzdIe95rnpk-_Sf-ZRq4EFS0tnYP4vYaJ5f-ZUA/s1600/sunset-sunrise-btrix+(2).jpg" /> </a>
4. اضغط حفظ وبكده نكون انتهينا

ملحوظة : استبدل روابط الصور فى الكود بروابط الصور الخاصة بك

التسميات

التسميات:

المشاركات الشائعة من هذه المدونة

مراجعة هاتف nokia lumia 930

السلام عليكم و رحمة الله و بركاته نظام ويندوز فون الان يتراوح عمره الى حوالى الاربع سنوات و حتى الان لم يحصل على ذلك الاهاتف المميز الذى يستطيع كافة امكانياته و الذى يجعله يستطيع المنافسه مع الايفون و الاندرويد . نوكيا لوميا 930 يبدو من مواصفاته انه سوف يكون هذا الهاتف مع امكانيات مثل شاشة super amelod و معالج خارق و التحديث الاخير و الافضل لويندوز فون حتى الان تجعل منه منافس لاكبر الهواتف فى العالم حاليا ... فى هذا المقال سوف نستعرض مميزات و عيوب هذا الهاتف الاكثر من رائع ...   ميزة clearback display    ميزة clearback display فى شاشة ال super amoled المستخدمة فى موبايل نوكيا لوميا 930 اكثر من رائعة و بالرغم من اعتقاد الكثيرين ان شاشة lcd افضل من ال amelod لكون الالوان تكون اكثر طبيعية و الاضاءة تكون افضل من ال amelod الا ان الشاشة المزود بها هذا الهاتف اكثر من رائعة و مع مميزات مثل وضوح اللون الاسود التباين العالى جدا و الالوان الاكثر من رائعة بدرجة وضوح فى الالوان اعلى بكثير من شاشة lcd تجعل من استخدامه تجربة اكثر من رائعة. هذه الميزة تجعل...
إرسال تعليق
قراءة المزيد

4 طرق لاضافة تويتر الى مدونة ووردبريس

جميعنا يعلم اهمية الشبكات الاجتماعية للمدونات هذه الايام و انها اصبحت من اسهل و اسرع الطرق لاشهار المدونات الجديدة و تعتمد عليها كبار المدونات كما انها مجانية تماما و لعل من اهم هذه الشبكات تويتر و الذه من شظانه ان يجلي الا موقعك الاف من المتابعين و الزوار الحقيقين ان استعطت ان تبنى جمهوراً جيداً عليه .... و اليوم اقدم لكم 4 طرق لكى تضيف تويتر الى مدونتك و تستفيد من هذه الشبكة الرائعة     1.   اضافة تويتات داخل التدوينة الان يمكنك اضافة احد تويتاتك من تويتر داخل تدوينة على الوورد بريس بالاضافة الى زر المتابعة بجوار التدوينة و تعتبر من اسهل الطرق لاضافة تويتر فما عليك سو اضافة رابط التيويتة بالكامل و دع الوورد بريس يقوم بالباقى كما فى الصورة .     2.      اضافة زر المتابعة اذا من الاشخاص الفعالين على تويتر و تنشر باستمرار جديد تدويناتك على تويتر يمكنك وضع زر المتابعة فى مدونتك ليستطيع زوار المدونة متابعتك على تويتر حتى و لم يزوروا المدونة و هذه الطريقة تؤمن زوار و متابعين جيدين بستمرار . تويتر تقدم اداة رائعة جدا ...
قراءة المزيد

اضافة المواضيع الشائعة ب css اكثر من رائعة

السلام عليكم و رحمة الله و بركاته باذن الله سوف نقوم بشرح اضافة من اهم اضافات البلوجر وهى اضافة المواضيع الشائعة فهذه الاضافة تساعد الزائر على معرفة اخر المواضيع فى مدونتك و الاطلاع على كل جديد لديك و لكن غالبا يكون شكلها ليس جيدا و يخرب شكل المدونة الاضافة التى ساشرحها تمتع بشكل جمالى اكثر من رائع ..... بدون اطالة معاينـــة الاضافة     -   شرح تركيب الاضافة قم بتسجيل الدخول الى لوجة التحكم   اختار " قالب "   ثم اضغط على " تحرير html "  ابحث عن هذا الكود ]]></b:skin> الصق الكود التالى قبله .popular-posts ul li {background: #FFF url() no-repeat scroll 5px 10px; list-style-type: none;padding:5px 5px 5px 20px !important; border: 1px solid #ddd;border-radius:30px; -moz-border-radius:30px; -webkit-border-radius:30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; height: 40px; -moz-box-shadow: 3px 2px 5px #242424; -webkit-box-shadow: 3px 2px 5px #242424; box-shadow: 3px 2px 5px #242424;margin-bot...
قراءة المزيد