Code :
<style>
img {
cursor: pointer;
transition: -webkit-transform 0.1s ease
}
img:focus {
-webkit-transform: scale(6);
-ms-transform: scale(6);
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
var imgs = document.querySelectorAll('img');
Array.prototype.forEach.call(imgs, function (el, i) {
if (el.tabIndex <= 0) el.tabIndex = 10000;
});
});
</script>
Apply this code in the <head> --- </head> section of your webpage and all the images in your page will zoom when you click on the image.
Happy Coding
<style>
img {
cursor: pointer;
transition: -webkit-transform 0.1s ease
}
img:focus {
-webkit-transform: scale(6);
-ms-transform: scale(6);
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
var imgs = document.querySelectorAll('img');
Array.prototype.forEach.call(imgs, function (el, i) {
if (el.tabIndex <= 0) el.tabIndex = 10000;
});
});
</script>
Apply this code in the <head> --- </head> section of your webpage and all the images in your page will zoom when you click on the image.
Happy Coding
