HTML/CSS framework for case overlays on top of media cover art.

Download

Usage

  1. 1

    Include the CSS: NOTE: inside your </head>.
    Also, you may need to edit the paths in this file to point to where you upload your case images (relative to your CSS location).

    <link rel="stylesheet" href="css/media.css" />
  2. 2

    Sample Markup: NOTE: replace ps4 with whatever case you want and cover-art.jpg with the path to your own hosted cover artwork.
    Also, you can use your own CSS to style the overall layout, in the above demo I used Twind/Tailwind.

    <ul>
  <li>
    <a href="#" class="media-case media-ps4"> <!-- change ps4 to your desired case -->
      <img src="cover-art.jpg" alt="..." />
    </a>
  </li>
  <!-- add more entries -->
</ul>