mediaCases

HTML/CSS framework for physical media case overlays over cover art.

Download

Usage

  1. 1

    Include the CSS:

    NOTE: inside </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. You can use your own CSS to style the overall layout.

    <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>