I have modified as follows
<var name="magnifier">
<var name="fullscreenzoom">2</var> <!-- Zoom for fullscreen (integer)-->
<var name="top"></var> <!-- Top position of magnifier -->
<var name="left"></var> <!-- Left position of magnifier -->
<var name="width">150</var> <!-- Width of magnifier block -->
<var name="height">150</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>
It's working fine as expected. But I want smaller lens and bigger preview.
I tried to modify .magnify-lens class and .magnifier-preview class but could not come up with fine tuning.
Best Answer
This is my settings I achieve smaller lens and bigger preview:
Yourvendor/YourTheme/view/etc.xml
and css to get proper zoom. 3 in example is big.
Instead of using CSS better add proper image - bigger and with better resolution. This will give you nice zoom and bigger image on magnifier.