JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="zoom" style="background-image: url(http://picsum.photos/id/23/4000/900)">
    <!-- <img src="http://picsum.photos/id/23/4000/900" alt=""> -->
</div>

CSS

#zoom {
    width: 770px;
    height: 580px;
    border: 1px solid black;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; 
}
img {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    /* height: 100%; */
}

JavaScript

document.querySelector('#zoom').addEventListener('mouseover',function(e){
	console.log()
})