Apply image or gradient as border

by 23to33to43

HTML

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

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <title>Document</title>
</head>

<body>
    <div class="content">
        <div class="base_img_box">
            <img class="base_img" src='https://i.gyazo.com/2ef3dad2a118dce6bb99a44b62a9318a.jpg' />
            <!-- :: htmlタグに直接関数を書く場合は↑上記一行のタグ内容を ↓下記一行に代える-->
            <!-- img class="base_img" src='img/SamplePic.jpg' onmousemove="zoomIn(event)" onmouseout="zoomOut(event)" /-->
        </div>
        <div class="lens_img_box">
            <img class="lens_img" src='https://i.gyazo.com/918b20f3a1ec45ee4228882eae5b77a3.jpg' />
        </div>
    </div>
    <script type="text/javascript" src="script/sample.js"></script>
</body>

</html>

CSS

.content {
    cursor: pointer;
    position: relative;
    margin: 30px;
}
.base_img_box {
    z-index: 0;
}

.lens_img_box {
    position: absolute;
    opacity:0;
    width: 200px;
    height: 200px;
    overflow: hidden;
    pointer-events: none;
    border-radius: 100%;
    border: solid 5px #ffffff;
    z-index: 1;
}

.lens_img{
    position: absolute;
    transform-origin: top left;
}

JavaScript

// Dom  元画像
        let baseImg = document.querySelector(".base_img");
        
        // Dom  拡大画像Box (虫眼鏡)
        let lensImgBox = document.querySelector(".lens_img_box");
        
        // Dom  拡大画像
        let lensImg = document.querySelector(".lens_img");

        // 拡大比率　今回は2倍
        let ratio = 2;

        // 元画像の上をマウスポインタが通った場合、虫眼鏡を表示
        baseImg.addEventListener("mousemove", function (event) {
            // :: htmlタグに直接関数を書く場合は↑上記一行を ↓下記一行に代える
            // function zoomIn(event) {

            // 拡大画像Box(虫眼鏡...元画像の座標から100引いた値を設定)
            lensImgBox.style.opacity = 1;
            lensImgBox.style.top = (event.offsetY - 100) + "px";
            lensImgBox.style.left = (event.offsetX - 100) + "px";

            //　拡大画像 (元画像の座標から反転して100足した値を設定)
            let newLensOffsetY = event.offsetY * ratio * -1 + 100;
            let newLensOffsetX = event.offsetX * ratio * -1 + 100;

            lensImg.style.top = (newLensOffsetY) + "px";
            lensImg.style.left = (newLensOffsetX) + "px";
            // :: ↑上記二行は ↓下記一行でも実装可能
            // lensImg.style.transform = " translate(" + newLensOffsetX + "px, " + newLensOffsetY + "px)";
        
        }, false);
        // :: htmlタグに直接関数を書く場合は↑上記一行を ↓下記一行に代える
        // }
        
        // 元画像の上にマウスポインタがない場合、虫眼鏡を非表示
        baseImg.addEventListener("mouseout", function () {
            // :: htmlタグに直接関数を書く場合は↑上記一行を ↓下記一行に代える
            // function zoomOut(event) {
            lensImgBox.style.opacity = 0;

        }, false);
        // :: htmlタグに直接関数を書く場合は↑上記一行を ↓下記一行に代える
        // }