How To Create an Image Zoom hover Effect with Ok Zoom jQuery Plugin in Html Css

Pada Sunday, March 07, 2021 Sunday, March 07, 2021

How To Create an Image Zoom hover Effect with Ok Zoom jQuery Plugin

Hello friends, in this post we learn how to How To Create an Image Zoom hover Effect with Ok Zoom jQuery Plugin in Html Css. Ok Zoom Is an opensource jQuery Plugin whoose written in javascript language.

official Website :- go to official

Source Code:-

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ok Zoom </title>
    <style>
        body{
            height: 100vh;
            width: 100vw;
        }
        img {
            position: relative;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
            height: 300px;
            width: 400px;
        }
    </style>
</head>

<body>
    <img src="https://picsum.photos/800/600" alt="">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.slim.js"></script>
    <script src="http://okfoc.us/okzoom/src/okzoom-1.0.min.js"></script>

    <script>
        $(document).ready(function(){
            $('img').okzoom({
                width: 200,
                height: 200,
                scaleWidth: 800,
                round: true,
                background: "#fff",
                // backgroundRepeat: "repeat",
                shadow: "0 0 5px #000",
                border: "1px solid black"
                });
        })
    </script>

</body>

</html>