難でもアリ: codropsに載っている画像の上で動くCSSを試してみる

2015年7月25日土曜日

codropsに載っている画像の上で動くCSSを試してみる

またまた codrops に載っているものを試してみました。
下の画像にマウスを持って行ってください
動きのあるのが楽しくてついついやってみたくなりますね

修造暑すぎ

Wow hot since Shuzo has returned home.

htmlはこんな以下です。

    <head>
    <link rel="stylesheet" type="text/css" href="style_common.css" />
    <link rel="stylesheet" type="text/css" href="style3.css" />
    </head>
    <!-- body -->
    <div class="main">
      <div class="view view-third">
        <img src="画像ファイル" />
        <div class="mask">
          <h2 style="font-weight:100;">修造暑すぎ</h2>
          <p>Wow hot since Shuzo has returned home.</p>
          <a href="リンク" class="info" target="_blank">Read More</a>
        </div>
      </div>
    </div>

2つのCSSを読み込んでおき
動きはsytle(n).cssで決まります。
あとはイメージやらコメント内容を記載するのみです
簡単ですねぇ