hoverzoom-js/dist/hoverzoom.min.css

A lightweight, high-performance hover-to-zoom image magnifier plugin with zero dependencies

.hoverzoom{display:flex;width:fit-content;position:relative}.hoverzoom-inside{top:0;transform:translate(-10000px,-10000px);width:61px;height:61px;border:1px solid #aaa;border-color:rgba(170,170,170,.7);box-shadow:0 0 5px rgba(0,0,0,.3);cursor:none;z-index:10;opacity:0;position:absolute!important;overflow:hidden!important;pointer-events:none!important}.hoverzoom-zoom{opacity:0;background-repeat:no-repeat;-webkit-transition:opacity .5s;transition:opacity .5s}.hoverzoom-image{cursor:none}.hoverzoom-magnifier{top:0;transform:translate(-10000px,-10000px);height:60px;opacity:0;border:1px solid #aaa;border-color:rgba(170,170,170,.7);box-shadow:0 0 5px rgba(0,0,0,.3);cursor:none;z-index:10;position:absolute!important;overflow:hidden!important;pointer-events:none!important;transition:opacity .5s}.hoverzoom-magnifier--round{height:180px;width:180px;border-radius:50%;border:1px solid #fff;box-shadow:0 0 6px #ddd}.hoverzoom-magnifier--image{position:absolute!important;max-width:none!important;max-height:none!important;background-repeat:no-repeat}