センス良いイメージホバーを実装できるオープンソースCSS「Izmir」

◆ Izmir
https://ciar4n.com/izmir/

紹介

「Izmir」は、センス良いイメージホバーを実装できるオープンソースのCSSです。

実装する

https://github.com/ciar4n/izmir

導入方法はいたってシンプル。GitHubよりcssをダウンロードします。

<html>
<head>
	<link rel="stylesheet" href="css/izmir.min.css">
</head>
<body>
	<figure class="c4-izmir">
 		<img src="https://source.unsplash.com/FaPxZ88yZrw/400x300" alt="Sample Image">
  		<figcaption>
      	<h3>
        	Some sample text
      	</h3>
    	</div>
	</figure>
</body>
</html>

あとは、headでcssをインクルードし、bodyにイメージホバーのスニペットを書き込むだけで完了。

これでセンスのよいホバーアニメーションが実装できます。

その他にもたくさんのアニメーションが用意されていますので、プロジェクトページを見ながら実装してみてください。

◆ Izmir
https://ciar4n.com/izmir/


コメントを読む

新着ピック  






















新着ニュース

Travis CIでRepositoryのアクセス権ごとにどんな操作が可能であるか確認してみた | Developers.IO

S3のユーザーポリシーを使用したバケットへのアクセスコントロールを公式チュートリアルで理解する | Developers.IO

ポケモンGOで初の大規模メンテナンス 2日未明から7時間

NeovimでScalaの編集環境を整えてみた | Developers.IO

営業推進室にジョインしました大森です | Developers.IO

AWS事業本部コンサルティング部にジョインしました大村です | Developers.IO

トレンドマイクロの製品に脆弱性? “マイクロソフトからBAN”の疑惑 公式は「事実と異なる」

「iPhone SE(第2世代)」用ケース選び 背面手帳型ケースおすすめ3選【2020年最新版】

Amazonギフト券がAmazon以外でも使える Amazon Payから残高を利用可能に

AWS事業本部にジョインしました川上です! | Developers.IO

DA事業本部にジョインした石川葉月です | Developers.IO

Disney+(ディズニープラス)、6月11日に日本上陸 ドコモが国内独占で提供

ImageBuilder をサポートした CloudFormation で AMI作成から EC2のオートスケール起動まで実装してみた | Developers.IO

新卒社員が入社2ヶ月でAWS Cloud Practitionerを取得した話。 | Developers.IO

“株式市場”のように商品を売買するECサイト「StockX」日本上陸 スニーカーやアパレルに特化

身内に潜む敵? 実はリモートより怖いlocal攻撃

ドローン動画「A World Artists Love」のアニ・アコピアン監督が語る制作秘話 | TechCrunch Japan

ドローン動画「A World Artists Love...

TechCrunch Japan / 11時間前


トランプ大統領の投稿にFacebookが行動を起こさない理由をザッカーバーグ氏が説明 | TechCrunch Japan

決定版!イマドキの ESLint 設定! | Developers.IO

PayPayがオンライン診断のオンライン決済に対応、調剤薬局の服薬指導にも使える | TechCrunch Japan

もっと見る
記事をPICKする
会員登録
Register
記事をPICKする

会員登録すると、もっと便利に利用できます。