تأثير تكبير الصورة عند تمرير الماوس ب CSS

تأثير الزوم على الصورة ب CSS


تأثير تكبير الصورة عند تمرير الماوس ب CSS

بفضل الميزات الجديدة التي يقدمها الإصدار 3 من لغة CSS، من الممكن إنشاء تأثيرات مثيرة للإعجاب، مثل التكبير و التصغير عند تمرير الماوس فوق الصورة.

wpRock CSS - Zomm effect on image hover

مرر الماوس على الصورة لتشاهد التأثير

لإنشاء التأثير  الذي لمسته على الصورة أعلاه يمكنك استخدام  كود CSS في الفقرة الموالية والذي يسمح لك بالحصول على تأثير التكبير و التصغير على الصور عند تمرير الماوس فوقها .

كود CSS لتكبير الصورة عند تمرير الماوس


 

CSS

∴ إفتح محرر النصوص الذي تستعمله و اليكن    Notepad++

ألصق الكود التالي ثم قم بحفظ الملف بامتداد html و سترى نفس النتيجة الموجودة فوق.

سيكون عليك أولا ً تغيير  رابط الصورة داخل هذه الشفيرة بالصورة التي تناسبك :

ارجو استعمال الكود بعناية ، وإن شاء الله ستحصل على نتيجة مميزة.

للأمانة الكود منقول من هنا:

CSS : Effet de zoom au survol d’une image

هنا مواضيع مشابهة لسكريبتات مهمة لك:


 

قناتي على اليوتيوب jabism web قناتي على اليوتوب

أرى أن هذه المواضيع قد تهمك:

 

شَـاركِ الْمَوْضُوع:
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.

اترك تعليقاً

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

حول الكاتب :   من أقصى شمال المغرب كاتب مقالات إلكترونية حول كيفية بناء موقع ويب ناجح : ووردبريس ، HTML ، CSS .ومواضيع مختلفة وناشط على اليوتيوب في قناة: Jabism Web و رحيل الليل
كتب 451 مقالة في jabism.com.
-:- راسلني   -:- تابعني على تويتر   -:- تابعني على الفايسبوك

195 عدد المشاهدات لهذا المحتوى
Scroll to Top