带鼠标悬停特效的九宫格图片选项卡【原创】

页面的head部分，需引入页面的样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，用了多个div容器和ul无序列表来显示九宫格里内容，代码如下：

<div class="background-lyrics">
  秘密——吸引力法则：这个秘密可以让你得到你想要的一切，包括快乐健康财富。你能拥有一切，达到你的目标，变成你想成为的人。我们可以拥有一切我们想拥有的东西，无论什么都能得到。你想住在什么样的房子里？你想当个百万富翁吗？你想拥有什么样的事业呢？你希望自己更成功吗？你究竟想要什么？我看到奇迹发生在许多人的生命里，比如财富上，绝症康复，精神康复，以及两性关系转变的奇迹。奇迹之所以出现，是因为他们知道怎么运用我们即将公布的秘密。这是生命中伟大的秘密。这个秘密就是过去、现在和未来一切的答案。我们都具有无穷的力量，我们都被同样的定律引导着，宇宙的自然定律真的是精确无比，因此我们建造宇宙飞船没有任何问题，还可以送人上月球，甚至可以预估登陆时间，精确度在1/10秒之内，不管你是在印度还是在澳洲，纽西兰，斯德哥尔摩，伦敦，多伦多，蒙特娄还是纽约，我们都依循着一种力量，一种定律，就是吸引力。这个秘密就是吸引力定律。你生命里发生的一切，都是由你吸引而来的...
</div>
<div class="container-master">
  <div class="container-tile">
    <h1>九宫格切图点击加载内容列表</h1>
    <div class="content">
      <div class="floaty tile">
        <h3 class="title">秘密</h3>
        <div class="lines"> </div>
        <ul>
          <li>这个秘密可以让你得到你想要的一切，包括快乐健康财富。</li>
          <li>你能拥有一切，达到你的目标，变成你想成为的人。</li>
          <li>我们可以拥有一切我们想拥有的东西，无论什么都能得到。</li>
          <li>你想住在什么样的房子里？</li>
          <li>你想当个百万富翁吗？</li>
          <li>你想拥有什么样的事业呢？</li>
          <li>你希望自己更成功吗？你究竟想要什么？</li>
        </ul>
      </div>
      <div class="floaty tile">
        <h3 class="title">吸引力法则</h3>
        <div class="lines"> </div>
        <ul>
          <li>这个秘密可以让你得到你想要的一切，包括快乐健康财富。</li>
          <li>你能拥有一切，达到你的目标，变成你想成为的人。</li>
          <li>我们可以拥有一切我们想拥有的东西，无论什么都能得到。</li>
          <li>你想住在什么样的房子里？</li>
          <li>你想当个百万富翁吗？</li>
          <li>你想拥有什么样的事业呢？</li>
          <li>你希望自己更成功吗？你究竟想要什么？</li>
        </ul>
      </div>
      <div class="floaty tile">
        <h3 class="title">健康</h3>
        <div class="lines"> </div>
        <ul>
          <li>这个秘密可以让你得到你想要的一切，包括快乐健康财富。</li>
          <li>你能拥有一切，达到你的目标，变成你想成为的人。</li>
          <li>我们可以拥有一切我们想拥有的东西，无论什么都能得到。</li>
          <li>你想住在什么样的房子里？</li>
          <li>你想当个百万富翁吗？</li>
          <li>你想拥有什么样的事业呢？</li>
          <li>你希望自己更成功吗？你究竟想要什么？</li>
        </ul>
      </div>
      <div class="floaty tile">
        <h3 class="title">快乐</h3>
        <div class="lines"> </div>
        <ul>
          <li>这个秘密可以让你得到你想要的一切，包括快乐健康财富。</li>
          <li>你能拥有一切，达到你的目标，变成你想成为的人。</li>
          <li>我们可以拥有一切我们想拥有的东西，无论什么都能得到。</li>
          <li>你想住在什么样的房子里？</li>
          <li>你想当个百万富翁吗？</li>
          <li>你想拥有什么样的事业呢？</li>
          <li>你希望自己更成功吗？你究竟想要什么？</li>
        </ul>
      </div>
      <div class="floaty tile">
        <h3 class="title">财富</h3>
        <div class="lines"> </div>
        <ul>
          <li>这个秘密可以让你得到你想要的一切，包括快乐健康财富。</li>
          <li>你能拥有一切，达到你的目标，变成你想成为的人。</li>
          <li>我们可以拥有一切我们想拥有的东西，无论什么都能得到。</li>
          <li>你想住在什么样的房子里？</li>
          <li>你想当个百万富翁吗？</li>
          <li>你想拥有什么样的事业呢？</li>
          <li>你希望自己更成功吗？你究竟想要什么？</li>
        </ul>
      </div>
      <div class="floaty tile">
        <h3 class="title">自由</h3>
        <div class="lines"> </div>
        <ul>
          <li>这个秘密可以让你得到你想要的一切，包括快乐健康财富。</li>
          <li>你能拥有一切，达到你的目标，变成你想成为的人。</li>
          <li>我们可以拥有一切我们想拥有的东西，无论什么都能得到。</li>
          <li>你想住在什么样的房子里？</li>
          <li>你想当个百万富翁吗？</li>
          <li>你想拥有什么样的事业呢？</li>
          <li>你希望自己更成功吗？你究竟想要什么？</li>
          </ul>
      </div>
      <div class="floaty tile">
        <h3 class="title">幸福</h3>
        <div class="lines"> </div>
        <ul>
          <li>这个秘密可以让你得到你想要的一切，包括快乐健康财富。</li>
          <li>你能拥有一切，达到你的目标，变成你想成为的人。</li>
          <li>我们可以拥有一切我们想拥有的东西，无论什么都能得到。</li>
          <li>你想住在什么样的房子里？</li>
          <li>你想当个百万富翁吗？</li>
          <li>你想拥有什么样的事业呢？</li>
          <li>你希望自己更成功吗？你究竟想要什么？</li>
        </ul>
      </div>
      <div class="floaty tile">
        <h3 class="title">感恩</h3>
        <div class="lines"> </div>
        <ul>
          <li>这个秘密可以让你得到你想要的一切，包括快乐健康财富。</li>
          <li>你能拥有一切，达到你的目标，变成你想成为的人。</li>
          <li>我们可以拥有一切我们想拥有的东西，无论什么都能得到。</li>
          <li>你想住在什么样的房子里？</li>
          <li>你想当个百万富翁吗？</li>
          <li>你想拥有什么样的事业呢？</li>
          <li>你希望自己更成功吗？你究竟想要什么？</li>
        </ul>
      </div>
      <div class="floaty tile">
        <h3 class="title">充满爱</h3>
        <div class="lines"> </div>
        <ul>
          <li>这个秘密可以让你得到你想要的一切，包括快乐健康财富。</li>
          <li>你能拥有一切，达到你的目标，变成你想成为的人。</li>
          <li>我们可以拥有一切我们想拥有的东西，无论什么都能得到。</li>
          <li>你想住在什么样的房子里？</li>
          <li>你想当个百万富翁吗？</li>
          <li>你想拥有什么样的事业呢？</li>
          <li>你希望自己更成功吗？你究竟想要什么？</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="container-lyrics">
    <div class="content">
      <div class="header">
        <a class="back"></a>
        <h4 class="lyrics-title"></h4></div>
      <div class="lyrics-wrapper"></div>
    </div>
  </div>
</div>

页面的底部，需引入jQuery库和必要的JS文件，用来响应页面的鼠标事件，代码如下：

<script type="text/javascript" src='js/jquery.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>