< >

handy.php


Quell Code


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

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <title>Testseite</title>
    <style>
        html,
        body,
        div {
            width: 100%;
            height: 100%;
        }

        #bcpo .bcpo-images {
            display: flex;
            justify-content: center;
            align-items: center;
        }



        #bcpo .bcpo-images div.bcpo-image-parent {
            width: 100px;
            height: 100px;
            transition: 0.5s;
        }

        img {
            width: 100%;
            height: 100%;
        }

        #bcpo .bcpo-colors div.bcpo-color-parent:hover,
        #bcpo .bcpo-colors div.bcpo-color-parent.magnify,
        #bcpo .bcpo-images div.bcpo-image-parent:hover,
        #bcpo .bcpo-images div.bcpo-image-parent.magnify {
            transform: scale(2);
            z-index: 1;
        }

        #bcpo .bcpo-colors div.bcpo-color-parent.magnify,
        #bcpo .bcpo-images div.bcpo-image-parent.magnify {
            transform: scale(2) translate(-50px, -50px);
            z-index: 1;
        }
    </style>
</head>

<body>
    <div id="bcpo">
        <div class="bcpo-images">
            <div class="bcpo-image-parent">
                <img src="https://webentwicklung.ulrichbangert.de/images/Stoff-transparent.png">
            </div>
        </div>
    </div>
    <script>
        var conts = document.querySelectorAll('#bcpo .bcpo-images div.bcpo-image-parent');
        for (var i = 0; i < conts.length; i++) {
            conts[i].addEventListener('touchstart', function (event) {
                event.preventDefault();
                this.classList.add('magnify');
            });
        }
        document.querySelector('body').addEventListener('touchend', function () {
            document.querySelector('div.bcpo-image-parent.magnify').classList.remove('magnify');
        });
    </script>
</body>

</html>