تأثير الزوم على الصورة ب CSS
تأثير تكبير الصورة عند تمرير الماوس ب CSS
بفضل الميزات الجديدة التي يقدمها الإصدار 3 من لغة CSS، من الممكن إنشاء تأثيرات مثيرة للإعجاب، مثل التكبير و التصغير عند تمرير الماوس فوق الصورة.
![wpRock CSS - Zomm effect on image hover](https://i0.wp.com/jabism.com/img/img.jpg?w=1200)
مرر الماوس على الصورة لتشاهد التأثير
لإنشاء التأثير الذي لمسته على الصورة أعلاه يمكنك استخدام كود CSS في الفقرة الموالية والذي يسمح لك بالحصول على تأثير التكبير و التصغير على الصور عند تمرير الماوس فوقها .
كود CSS لتكبير الصورة عند تمرير الماوس
CSS
∴ إفتح محرر النصوص الذي تستعمله و اليكن Notepad++
ألصق الكود التالي ثم قم بحفظ الملف بامتداد html و سترى نفس النتيجة الموجودة فوق.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /** * ZOOM IMAGE EFFECT ON HOVER // wpRock.fr */ .wprock-img-zoom-hover .wprock-img-zoom { overflow: hidden; position: relative; } .wprock-img-zoom-hover .wprock-img-zoom img { max-width: 100%; -moz-transition: all 0.8s; -webkit-transition: all 0.8s; transition: all 0.8s; } .wprock-img-zoom-hover .wprock-img-zoom * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } .wprock-img-zoom-hover:hover .wprock-img-zoom img { -moz-transform: scale(1.06); -webkit-transform: scale(1.06); transform: scale(1.06); } </style> </head> <body> <div class="wprock-img-zoom-hover" style="width: 100%; max-width: 520px; margin: 100px auto; border: 2px solid lightseagreen;"> <div class="wprock-img-zoom"> <img src="https://wprock.fr/wp-content/uploads/2018/08/twitter-cover-wprock-520x254.png" alt="wpRock CSS - Zomm effect on image hover"> </div> <p>If the image or if this part of the text is flown over with the mouse, then the zoom effect will be triggered ;)</p> </div> </body> </html> |
سيكون عليك أولا ً تغيير رابط الصورة داخل هذه الشفيرة بالصورة التي تناسبك :
1 |
<div class="wprock-img-zoom"> <img src="https://wprock.fr/wp-content/uploads/2018/08/twitter-cover-wprock-520x254.png" alt="wpRock CSS - Zomm effect on image hover"> </div> |
ارجو استعمال الكود بعناية ، وإن شاء الله ستحصل على نتيجة مميزة.
للأمانة الكود منقول من هنا:
CSS : Effet de zoom au survol d’une image
هنا مواضيع مشابهة لسكريبتات مهمة لك:
![]() |
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.