randName · February 6, 2019 10:33
diff --git a/index.html b/index.html
 <html>
  <head>
    <style>
    .buttonInImage {
        position: relative;
        width: 100%;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    .buttonInImage img {
        width: 100%;
        height: auto;
    }

    .buttonInImage .btn1 {
        position: absolute;
        top: 50%;
        left: 25%;
        transform: translate(-50%, -50%);
        background-color: #555;
        color: white;
        font-size: 16px;
        padding: 12px 24px;
        border: none;
        cursor: pointer;
        border-radius: 5px;
        text-align: center;
    }

    .buttonInImage .btn1:hover {
        background-color: black;
    }

    .buttonInImage .btn2 {
        position: absolute;
        top: 50%;
        left: 75%;
        transform: translate(-50%, -50%);
        background-color: #555;
        color: white;
        font-size: 16px;
        padding: 12px 24px;
        border: none;
        cursor: pointer;
        border-radius: 5px;
        text-align: center;
    }

    .buttonInImage .btn2:hover {
        background-color: black;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  </head>
  <body>
    <h2>Button on Image</h2>
    <div id="dog" class="buttonInImage">
        <img src="https://loremflickr.com/320/240/dog" alt="Doggy">
        <button id="shift" class="btn1">Move</button>
        <button id="stop" class="btn2">Stop</button>
    </div>
    <script>
    $(document).ready(function () {
        //Task to move back and forth infinitely, able to pause at any time,  
        //start again from where was last stopped
        function animateLoop() {
            $("#dog").animate({ left: "-=750" }, 2000)
                .animate({ left: "+=750" }, 2000, function () { animateLoop() });
        }

        $("#shift").click(function () {
            animateLoop();
        });

        $("#stop").click(function () {
            $("#dog").stop();
            $("#dog").stop();
        });
    });
    </script>
  </body>
 </html>
	<html>
	<head>
	<style>
	.buttonInImage {
	position: relative;
	width: 100%;
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
	}

	.buttonInImage img {
	width: 100%;
	height: auto;
	}

	.buttonInImage .btn1 {
	position: absolute;
	top: 50%;
	left: 25%;
	transform: translate(-50%, -50%);
	background-color: #555;
	color: white;
	font-size: 16px;
	padding: 12px 24px;
	border: none;
	cursor: pointer;
	border-radius: 5px;
	text-align: center;
	}

	.buttonInImage .btn1:hover {
	background-color: black;
	}

	.buttonInImage .btn2 {
	position: absolute;
	top: 50%;
	left: 75%;
	transform: translate(-50%, -50%);
	background-color: #555;
	color: white;
	font-size: 16px;
	padding: 12px 24px;
	border: none;
	cursor: pointer;
	border-radius: 5px;
	text-align: center;
	}

	.buttonInImage .btn2:hover {
	background-color: black;
	}
	</style>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	</head>
	<body>
	<h2>Button on Image</h2>
	<div id="dog" class="buttonInImage">
	<img src="https://loremflickr.com/320/240/dog" alt="Doggy">
	<button id="shift" class="btn1">Move</button>
	<button id="stop" class="btn2">Stop</button>
	</div>
	<script>
	$(document).ready(function () {
	//Task to move back and forth infinitely, able to pause at any time,
	//start again from where was last stopped
	function animateLoop() {
	$("#dog").animate({ left: "-=750" }, 2000)
	.animate({ left: "+=750" }, 2000, function () { animateLoop() });
	}

	$("#shift").click(function () {
	animateLoop();
	});

	$("#stop").click(function () {
	$("#dog").stop();
	$("#dog").stop();
	});
	});
	</script>
	</body>
	</html>