Widget:Amplification

<style> .showOnBox{

   display:inline-block;
   margin:5px;

} .showOnImg {

   position: fixed;
   display:flex;
   background-color: rgba(0,0,0,0.50);
   z-index: 1000;
   overflow: auto;
   height: 100%;
   width: 100%;
   cursor: zoom-out;
   transition: 0.4s;
   opacity: 0;
   visibility: hidden;
   text-align: center;
   flex-direction: column;
   align-items: center;
   justify-content: center;

} .showOnImgSource {

   cursor: zoom-in;

} .showOn{

   display: flex;
   flex-direction: column;
   align-items: center;

} .bui-sns-info{

   z-index: 0;

} .showOnImgBox {

   text-align: center;
   width: auto;
   max-height: 100%;

} .showOnText{

   font-size: 16px;
   font-weight: bold;
   color: #fff;
   margin-top: 5px;

} </style> <Script> $(".showOn").click(function() { var showElemnet = $(this).next(".showOnImg").clone().appendTo("body");

   showElemnet.css({visibility:"visible", opacity: 1})
       .click(function() {
           $(this).remove();
   })

}); </Script>