Markdown create a drop down menu with clickable images

Question

I am using GitHub to store my images and creating a Markdown file so that deploys to a microsite. The code that I'm using looks good in GitHub's preview mode (has the dropdown menu and the clickable image) but my microsite doesn't show the image and I don't understand why.

I am using Material for MkDocs. In my GitHub's markdown file:

<details>  
  <summary>Click to expand dropdown</summary>    
  <div class="image-container">    
    <a href="https://google.com">    
      <img src="Google_media/logo.png" alt="Google" width="350" height="200">    
    </a>
  </div>    
</details>

Here is how it looks on the microsite. How can I get my image to show on the microsite?

I've tested the image using a traditional MD and HTML image call outside of the dropdown menu and it works fine:

In markdown:

[![logo](Google_media/logo.png 'logo')](https://google.com)

In HTML:

<a href="https://google.com">  
  <img src="Google_media/logo.png" alt="logo" width="350" height="200">
</a>

Answer 1

CSS: style="content:url('/path/to/file.png')

<details>  
  <summary>Click to expand dropdown</summary>    
  <div class="image-container">    
    <a href="https://google.com">    
      <span style="content:url('/path/to/file.png')"></span>
    </a>
  </div>    
</details>

Example @ JSFiddle.net