Plugin for Evolution CMS. Adds nice style for multiTV image preview with zoom on hover

multitvThumbZoom.php

// multitvThumbZoom
// adds nice style for image preview with zoom on hover
// event: OnManagerMainFrameHeaderHTMLBlock

$e = & $modx->Event;

if ( $e->name == "OnManagerMainFrameHeaderHTMLBlock" ) {
  $html = '
  <style>
    .multitv .list li.element .mtvThumb {
      position: absolute;
      z-index: 10;
      right: 20px;
      margin-bottom: 0; 
      margin-right: 0 !important;
      width:  100px !important; 
      height: 30px !important; 
      border: 1px solid rgba(0,0,0,0.075);
      background-color: rgba(0,0,0,0.02);
      transition: all 0.3s ease;
      transform-origin: center right;
    }
      
    .multitv .list li.element .mtvThumb:not(:empty):hover {
      z-index: 100;
      width:  100px !important;
      height: 100px !important; 
      background-color: #fff;
      transform: scale(2) translate3d(0,-15%,0);
    }
        
    .multitv .list li.element .mtvThumb img {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width:  100% !important;
      height: 100% !important;
      object-fit: contain;
      object-position: center;
      float: none !important;
      min-height: 1px !important;
      min-width: 1px !important;
      max-height: none !important;
      max-width: none !important;
    }
  </style>
  ';
  $e->output($html);
}

Default state

Hover