Widget:Teste

 Ver demonstração

<style> .gla-gif-overlay {

 position: fixed;
 top: 0; left: 0; width: 100%; height: 100%;
 background: rgba(0,0,0,0.85);
 display: none; align-items: center; justify-content: center;
 z-index: 9999;

} .gla-gif-content {

 position: relative; max-width: 90%; max-height: 90%;

} .gla-gif-content img {

 max-width: 100%; max-height: 100%;
 display: block; border-radius: 8px;

} .gla-gif-close {

 position: absolute; top: -10px; right: -10px;
 background: #fff; border-radius: 50%;
 font-size: 20px; line-height: 20px; padding: 5px;
 cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.5);

} </style>

   ×
   <img src="" alt="GIF">

<script> (function(){

 var gifUrl = "{{{gif}}}";
 var overlay = document.querySelector('.gla-gif-overlay');
 var gifImg  = overlay.querySelector('img');
 var closeBtn = overlay.querySelector('.gla-gif-close');
 var trigger  = document.querySelector('.gla-gif-trigger');

 trigger.addEventListener('click', function(){
   gifImg.src = gifUrl;
   overlay.style.display = 'flex';
 });

 function closeOverlay(){
   overlay.style.display = 'none';
   gifImg.src = ;
 }

 closeBtn.addEventListener('click', closeOverlay);
 overlay.addEventListener('click', function(e){
   if(e.target === overlay) closeOverlay();
 });

})(); </script>