When I hover over an image, it scales and the excess part of the image is hidden. However, I want the image to scale from the center by using transform-origin: 50% 50%.
The issue arises when I try to scroll or drag around the transformed image - I can't see the left or top parts of the image beyond its center.
On the other hand, if I use transform-origin: 0% 0%, I can view the entire image but then it no longer scales from the center.
Does anyone have any suggestions on how I can access the negative y and x spaces of the image while maintaining the transformation origin in the center?
/* Map Image
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#MapBase {
position: relative;
left: 100px;
width: 100%;
height: auto;
max-width: 450px;
max-height: 550px;
z-index: 1;
visibility: visible;
overflow: scroll;
}
#MapBase img {
display: block;
transition: transform .6s;
}
#MapBase:hover img {
transform: scale(2);
transform-origin: 50% 50%;
}<div id="MapBase" class="map-container map-base dragscroll">
<img src="https://via.placeholder.com/450x550" class="map">