Magento – Magento2: magnifier not working for product image on product details page

I've added below code in view.xml file in my custom theme:

<var name="magnifier">
            <var name="fullscreenzoom">2</var>  <!-- Zoom for fullscreen (integer)-->
            <var name="top">0</var> <!-- Top position of magnifier -->
            <var name="left">0</var> <!-- Left position of magnifier -->
            <var name="width">300</var> <!-- Width of magnifier block -->
            <var name="height">300</var> <!-- Height of magnifier block -->
            <var name="eventType">hover</var> <!-- Action that atcivates zoom (hover/click) -->
            <var name="enabled">true</var> <!-- Turn on/off magnifier (true/false) -->
        </var>

But the magnifier doesn't work. It's showing overlay image after hovering over product image but it's not zooming the image.

Any help would be appreciated.