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

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

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

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

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

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

CSS

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

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

<!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>

<!DOCTYPE html>

<head>

<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>

<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>

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

<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>

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

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

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

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

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