#تجميعة_1: مجموعة من 5 تأثيرات هوفر رائعة للصور

السلام عليكم ورحمة الله تعالى وبركاته، ومرحبا بك أخي الكريم في تدوينة جديدة حول تطوير المواقع على مدونة خطوات مطور، كما تعلم أخي الكريم فالهوفر هو عبارة عن خاصية موجودة في لغة الCSS التي تمكنك من تغيير شكل العنصر عند وضع سهم الفأرة عليه، سواءً تغيير لون الخلفية أو الخط أو الPadding أو الMargin وغيرها من الخصائص الأخرى..
لكن اليوم إن شاء الله لدينا تأثيرات مغايرة بنسبة 100% وهي احترافية بمعنى الكلمة قررت أن أضعها لك أخي الكريم في تجميعتين، التجميعة الأولى ستضم 5 تأثيرات هوفر، والثانية 5 كذلك، وبالتالي فستكون 10 تأثيرات هوفر مختلفة واحترافية بين يديك.
 بإمكانك استعمال هاته التأثيرات لتطوير قالب مدونتك، وإضافة تأثيرات أكثر روعةً على مدونتك لكي تجعل الزائر يبقى في مدونتك لمدة أطول أكثر لجمال منظرها، لأن حتى المظهر يساعدك على تقليص معدل التردد.
دون أن نخوض في الكلام كثيرا أخي الكريم أتركك لتعاين التأثيرات بنفسك، وتبدي رأيك فيها.

1- تأثير تكبير الصورة:

See the Pen XbxJqe by Moad Ghazi (@moadgeek) on CodePen.

2- تأثير Shrink لتصغير الصورة :

See the Pen gpBbzN by Moad Ghazi (@moadgeek) on CodePen.

3- تأثير Side Pan لجعل الصورة تمشي جانبا:

See the Pen MwPYXp by Moad Ghazi (@moadgeek) on CodePen.

4- تأثير Vertical pan لجعل الصورة تعلو للفوق:

See the Pen oXagyP by Moad Ghazi (@moadgeek) on CodePen.

5- تأثير Tilt لجعل الصورة تميل قليلا (10 درجات):

للعلم أنه بإمكانك التعديل على درجة الميلان كما تريد:

See the Pen WvabKr by Moad Ghazi (@moadgeek) on CodePen.

نلتقي في التجميعة الثانية بإذن الله غدا!

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

معاذ غازي - خطوات مطور