html - Preventing images from taking on the "display:block" style when a javascript plugin automatically applies it?

I'm trying to use a Javascript plugin called Gifa11y to be able to pause a several gifs on my page at once. However, pressing the button to pause them all causes them to acquire the "display:block" style when I do not want them to display that way. The way Gifa11y works is that it generates the first frame of the gif in a canvas element, and replaces the image with that first generated frame, but even styling that canvas element itself hasn't provided a solution.

Here is a markup of my problem: https://codepen.io/12345678z/pen/qBgBVPg I want to keep the gifs in the position that they were before pressing the pause button.

HTML:

<script src="https://cdn.jsdelivr.net/gh/adamchaboryk/gifa11y@2.0.2/dist/js/gifa11y.umd.min.js"></script>

<main>

<button id="gifa11y-all" class="btn btn-primary" autocomplete="off">Pause all animations</button>

<div>
<img src="https://media1.giphy.com/media/gw3IWyGkC0rsazTi/giphy.gif">
<img src="https://media1.giphy.com/media/gw3IWyGkC0rsazTi/giphy.gif">
<img src="https://media1.giphy.com/media/gw3IWyGkC0rsazTi/giphy.gif">
<img src="https://media1.giphy.com/media/gw3IWyGkC0rsazTi/giphy.gif">
</div>
  
</main>

CSS (styling similar to my site to help illustrate problem, not important):

img{width:80px; height:50px;}

div{width: 200px;
  height: 200px;
  margin: auto;
  border-style: dotted;
  padding:20px;}

Javascript:

var gifa11y = new Gifa11y({
    container: 'main',
    buttonBackground: '#000000',
    buttonBackgroundHover: '#404040',
    buttonIconColor: 'white',
    missingAltWarning: 'false',
    showButtons:'false'
});

//code to fix firefox issue with the button
    window.addEventListener('pageshow', PageShowHandler, false);
    window.addEventListener('unload', UnloadHandler, false);

    function PageShowHandler() {
        window.addEventListener('unload', UnloadHandler, false);
    }

    function UnloadHandler() {
        window.removeEventListener('unload', UnloadHandler, false);
    }

I have already tried overwriting the style by using "display:flex!important;", "display:inline-block!important;", and "display:inline!important;" on different elements such as the divider, images themselves, and the canvas element.

Solution

Gifa11y seems to store its current state in the main html element as an attribute with data-gifa11y-all="playing" and data-gifa11y-all="paused". Using CSS attribute selectors you can select elements only for that state:

html[data-gifa11y-all="playing"] img {
  display: inline !important;
}

html[data-gifa11y-all="paused"] canvas {
  display: inline !important;
}

Full example:

var gifa11y = new Gifa11y({
  container: 'main',
  buttonBackground: '#000000',
  buttonBackgroundHover: '#404040',
  buttonIconColor: 'white',
  missingAltWarning: 'false',
  showButtons: 'false'
});

//code to fix firefox issue with the button
window.addEventListener('pageshow', PageShowHandler, false);
window.addEventListener('unload', UnloadHandler, false);

function PageShowHandler() {
  window.addEventListener('unload', UnloadHandler, false);
}

function UnloadHandler() {
  window.removeEventListener('unload', UnloadHandler, false);
}

img {
  width: 80px;
  height: 50px;
}

div {
  width: 200px;
  height: 200px;
  margin: auto;
  border-style: dotted;
  padding: 20px;
}

html[data-gifa11y-all="playing"] img {
  display: inline !important;
}

html[data-gifa11y-all="paused"] canvas {
  display: inline !important;
}

<script src="https://cdn.jsdelivr.net/gh/adamchaboryk/gifa11y@2.0.2/dist/js/gifa11y.umd.min.js"></script>

<main>

  <button id="gifa11y-all" class="btn btn-primary" autocomplete="off">Pause all animations</button>

  <div>
    <img src="https://media1.giphy.com/media/gw3IWyGkC0rsazTi/giphy.gif">
    <img src="https://media1.giphy.com/media/gw3IWyGkC0rsazTi/giphy.gif">
    <img src="https://media1.giphy.com/media/gw3IWyGkC0rsazTi/giphy.gif">
    <img src="https://media1.giphy.com/media/gw3IWyGkC0rsazTi/giphy.gif">
  </div>

</main>