react-inner-image-zoom/es/styles.min.css

A React component for magnifying an image within its parent container 🔎

.iiz{cursor:-webkit-zoom-in;cursor:zoom-in;display:inline-block;margin:0;max-width:100%;overflow:hidden;position:relative}.iiz--drag .iiz__zoom-img--visible{cursor:-webkit-grab;cursor:grab}.iiz__img{display:block;height:auto;max-width:100%;opacity:1;pointer-events:none;visibility:visible}.iiz__img--hidden{opacity:0;visibility:hidden}.iiz__img--abs{height:100%;left:0;top:0;width:100%}.iiz__img--abs,.iiz__zoom-img{display:block;position:absolute}.iiz__zoom-img{-webkit-touch-callout:none;max-width:none!important;opacity:0;pointer-events:none;visibility:hidden;width:auto!important}.iiz__zoom-img--visible{cursor:-webkit-zoom-out;cursor:zoom-out;opacity:1;pointer-events:auto;-ms-touch-action:none;touch-action:none;visibility:visible}.iiz__zoom-portal{bottom:0;left:0;position:fixed;right:0;top:0;z-index:10000}.iiz__btn{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:hsla(0,0%,100%,.8);border:none;display:-webkit-box;display:-ms-flexbox;display:flex;height:40px;justify-content:center;outline:none;padding:0;position:absolute;text-decoration:none;width:40px}.iiz__btn:before{background-position:50%;background-repeat:no-repeat;content:" ";display:block}.iiz__hint{bottom:10px;pointer-events:none;right:10px}.iiz__hint:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.9 19.9'%3E%3Cpath d='M13.9 7.4C13.9 3.8 11 .9 7.4.9S.9 3.8.9 7.4s2.9 6.5 6.5 6.5 6.5-2.9 6.5-6.5zm5.3 12.5-6.7-7.2c-1.4 1.3-3.2 2.1-5.1 2.1-4.1 0-7.4-3.3-7.4-7.4S3.3 0 7.4 0s7.4 3.3 7.4 7.4c0 1.7-.6 3.4-1.7 4.7l6.8 7.2-.7.6z' fill='%23000222'/%3E%3C/svg%3E");content:" ";height:20px;width:20px}.iiz__close{opacity:0;right:10px;top:10px;visibility:hidden}.iiz__close--visible{cursor:pointer;opacity:1;visibility:visible}.iiz__close:before{background-image:-webkit-gradient(linear,left top,left bottom,from(#222),to(#222)),-webkit-gradient(linear,left top,left bottom,from(#222),to(#222));background-image:-o-linear-gradient(#222,#222),-o-linear-gradient(#222,#222);background-image:linear-gradient(#222,#222),linear-gradient(#222,#222);background-size:100% 1px,1px 100%;content:" ";height:29px;margin:0 auto;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);width:29px}