Zoom image inside div and move

$("#videoContainer").css('height', $('#stream').height());
    $("#videoContainer").css('width', $('#stream').width());

    $('#videoContainer').on('mousewheel', function (event) {
        var height = $('#stream').height();
        var width = $('#stream').width();

        if (height == 480 && width == 640 && event.deltaY > 0) {
        } else {
            if (event.deltaY > 0) {
                height /= 2;
                width /= 2;
                $("#stream").css('height', height);
                $("#stream").css('width', width);
            }
            else if (event.deltaY < 0) {
                height *= 2;
                width *= 2;
                $("#stream").css('height', height);
                $("#stream").css('width', width);
            }
        }
    });

    function startDrag(e) {
        if (!e) {
            var e = window.event;
        }

        var targ = e.target ? e.target : e.srcElement;

        if (targ.className !== 'dragme') {
            return
        }
        offsetX = e.clientX;
        offsetY = e.clientY;

        if (!targ.style.left) {
            targ.style.left = '0px'
        }
        if (!targ.style.top) {
            targ.style.top = '0px'
        }
        coordX = parseInt(targ.style.left);
        coordY = parseInt(targ.style.top);
        drag = true;

        document.onmousemove = dragDiv;
        return false;
    }
    function dragDiv(e) {
        if (!drag) {
            return
        }
        if (!e) {
            var e = window.event
        }
        var targ = e.target ? e.target : e.srcElement;
        // move div element
        targ.style.left = coordX + e.clientX - offsetX + 'px';
        targ.style.top = coordY + e.clientY - offsetY + 'px';
        return false;
    }
    function stopDrag() {
        drag = false;
    }
    window.onload = function () {
        document.onmousedown = startDrag;
        document.onmouseup = stopDrag;
    }

Source: stackoverflow.com

Zoom image inside div and move

.dragme{
    position:relative;
    width: 270px;
    height: 203px;
    cursor: move;
}

Source: stackoverflow.com

Zoom image inside div and move

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8"/>
    <link href="css.css" rel="stylesheet" type="text/css" media="all"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script src="Mousewheel/jquery.mousewheel.min.js"></script>
</head>
<body>
<div id="videoContainer" style="overflow:hidden;">
    <img id="stream" class="dragme" alt="Camera is loading"
         src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png">
</div>
</body>
</html>
 Run code snippet

Source: stackoverflow.com

Similar codes

41 votes300 views3 answers
Centre align in position absolute
CSS
0 vote306 views2 answers
Center a video horizontally
CSS
0 vote317 views2 answers
Image horizontal scrolling in html
CSS
0 vote307 views1 answer
Css flex bottom
CSS
0 vote295 views1 answer
Line in css div
CSS
0 vote317 views1 answer
Css in head or body
CSS
0 vote306 views1 answer
How to use css on a react icon
CSS
6 votes330 views2 answers
Border-collapse
CSS
1 vote328 views1 answer
Padding up down left right
CSS
5 votes324 views1 answer
How to make text not highlightable css
CSS