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

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

كود CSS لتكبير الصورة عند تمرير الماوس – لإنشاء هذا التأثير على الصورة يمكنك استخدام هذا الكود التالي:

تقدم لك شركة المستقل كود جاهز كود CSS لتكبير الصورة عند تمرير الماوس






wpRock CSS - Zomm effect on image hover

If the image or if this part of the text is flown over with the mouse, then the zoom effect will be triggered 😉


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