Dann probiere mal dieses:
https://webentwicklung.ulrichbangert.de/hover.html
Ich habe zusätzlich das Bild etwas nach links oben verschoben, weil es sonst vom Finger bedeckt ist.
HTML
<!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="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>