WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

CSS3アニメーション・transitionのよるホバーアクション

HTML5+CSS3 jQueryプラグイン

CSS3によるアニメーションは大きく分けて、トランジション（transition）とアニメーション（animation）の２つに別ける事が出来ます。

CSS3におけるトランジション（transition）とアニメーション（animation）の違い

「transition」

動かすために:hoverなどのきっかけが必要
トランジションでは実行後に元のプロパティ値に戻る
比較的簡単な記述で動かす事が可能

「animation」

transitionより細かい設定が可能
記述が複雑
「@keyframes」の記述が必要

cssanimation.rocks

今回は「transition」を使い、画像をhoverさせた際に画像のキャプションを表示させる。
jQueryでも似たような物はありますが、今回の場合はキャプションをHTMLのhタグやPタグで表示させる事が出来るのがポイントです。

index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>transitionのよるホバーアクション</title>
<link rel="stylesheet" href="caption.css">
</head>

<body>
<div id="container">
<ul>
<li id="figure">
<a href="#">
<img src="../img/ph01_l.jpg" alt="">
<div id="cap1">
<h3>CSS3によるキャプション</h3>
<p>ホバーするとキャプションが出て来ます。</p>
</div>
</a>
</li>

<li id="figure2">
<a href="#">
<img src="../img/ph11_l.jpg" alt="">
<div id="cap2">
<h3>CSS3によるキャプション</h3>
<p>ホバーするとキャプションが出て来ます。</p>
</div>
</a>
</li>

<li id="figure3">
<a href="#">
<img src="../img/ph19_l.jpg" alt="">
<div id="cap3">
<h3>CSS3によるキャプション</h3>
<p>ホバーするとキャプションが出て来ます。</p>
</div>
</a>
</li>
</ul>
</div>
</body>
</html>

caption.css

@charset "utf-8";

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, 
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}

/*レイアウト*/
#container {
  width: 960px;
  margin: 100px auto;
}
li {
  float: left;
  margin: 10px;
}

/*ホバーアクション*/
h3, p {
	padding: 10px;
	color: #FFF;
  text-align: center;
}

li#figure{
	display: block;
	position: relative;
	overflow: hidden;
	width: 300px; /*画像の幅と同じ*/
}
div#cap1 {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.3);
	transition: 1s;
	opacity: 0;
}
#figure:hover #cap1 {
	opacity: 1;
}



li#figure2 {
	position: relative;
	overflow: hidden;
	width: 300px;/*サムネイル画像の幅と同じ*/
}
#cap2 {
	position: absolute;
	top: -100%;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.3);
	transition: 0.5s;
	opacity: 1;
}
#figure2:hover #cap2 {
	top: 0;
	left: 0;
}

#figure3 {
	position: relative;
	overflow: hidden;
	width: 300px;
}
#cap3 {
	position: absolute;
	bottom:-100%;
   left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	transition: .3s;
}
#figure3:hover #cap3 {
	bottom: 0;
	left: 0;
}

www.nxworld.net

>