Widget:Teste

 Ver demonstração

   ×
   <img src="https://i.imgur.com/GNQyaO5.gif" alt="GIF de demonstração" />

<style> .gla-gif-overlay {

 position: fixed; top:0; left:0; width:100%; height:100%;
 z-index: 9999;

} .gla-gif-backdrop {

 position: absolute; top:0; left:0; width:100%; height:100%;
 background: rgba(0,0,0,0.8);

} .gla-gif-content {

 position: relative;
 max-width: 90%; max-height: 90%;
 margin: auto;
 top: 50%; transform: translateY(-50%);
 background: #fff;
 padding: 5px;
 border-radius: 6px;

} .gla-gif-content img {

 max-width: 100%; max-height: 80vh;
 display: block;

} .gla-gif-close {

 position: absolute; top: 5px; right: 10px;
 font-size: 28px; color: #fff;
 cursor: pointer; z-index: 10000;

} </style>

<script> (function(){

 var trigger = document.querySelector('.gla-gif-trigger');
 var overlay = document.querySelector('.gla-gif-overlay');
 var backdrop = document.querySelector('.gla-gif-backdrop');
 var closeBtn = document.querySelector('.gla-gif-close');

 if(trigger && overlay){
   trigger.addEventListener('click', function(){
     overlay.style.display = 'block';
   });
   function closeOverlay(){
     overlay.style.display = 'none';
   }
   if(backdrop) backdrop.addEventListener('click', closeOverlay);
   if(closeBtn) closeBtn.addEventListener('click', closeOverlay);
 }

})(); </script>