【TIPS】画像ホバーの際アニメーション効果をつけるCSS3 - ihover -
スクリプト不要で、画像ホバー時にCSS3アニメーションで様々なキャプションを表示するスタイルシート。CSS3だけでここまでできるとは…。
目 次
hover effect【１】
左側と右側からテキストがスライドしてくるエフェクト
コーディングは、まずhtmlファイルに以下を記述
【 html 】
1
<!-- From left and right -->
2
<div class="row">
3
<div class="col-sm-6">
4
5
<!-- normal -->
6
<div class="ih-item circle effect13 from_left_and_right"><a href="#">
7
8
<div class="info">
9
<div class="info-back">
10
<h3>Heading here</h3>
11
<p>Description goes here</p>
12
</div>
13
</div></a></div>
14
<!-- end normal -->
15
16
</div>
17
<br>
18
<div class="col-sm-6">
19
20
<!-- colored -->
21
<div class="ih-item circle colored effect13 from_left_and_right"><a href="#">
22
23
<div class="info">
24
<div class="info-back">
25
<h3>Heading here</h3>
26
<p>Description goes here</p>
27
</div>
28
</div></a></div>
29
<!-- end colored -->
30
31
</div>
32
</div>
33
<!-- end From left and right -->
ＣＳＳはダウンロードした外部ファイル( https://github.com/gudh/ihover )の中にある 「ihover.css」を読み込む
【 CSS 】
1
hover effect【２】
画像を画面上側に、テキストを下側にエフェクトをかけて配置
コーディングは、まずhtmlファイルに以下を記述
【 html 】
1
<!-- From left and right -->
2
<div class="row">
3
<div class="col-sm-6">
4
5
<!-- normal -->
6
<div class="ih-item circle effect13 from_left_and_right"><a href="#">
7
8
<div class="info">
9
<div class="info-back">
10
<h3>Heading here</h3>
11
<p>Description goes here</p>
12
</div>
13
</div></a></div>
14
<!-- end normal -->
15
16
</div>
17
<br>
18
<div class="col-sm-6">
19
20
<!-- colored -->
21
<div class="ih-item circle colored effect13 from_left_and_right"><a href="#">
22
23
<div class="info">
24
<div class="info-back">
25
<h3>Heading here</h3>
26
<p>Description goes here</p>
27
</div>
28
</div></a></div>
29
<!-- end colored -->
ＣＳＳはダウンロードした外部ファイル( https://github.com/gudh/ihover )の中にある 「ihover.css」を読み込む
【 CSS 】
1
hover effect【３】
画像を回転させながら消して、テキスト表示に切り替える
コーディングは、まずhtmlファイルに以下を記述
【 html 】
1
<div class="row">
2
<div class="col-sm-6">
3
4
<!-- normal -->
5
<div class="ih-item square effect2"><a href="#">
6
<div class="img"><img src="client/images/assets/rect/10.jpg" alt="img"></div>
7
<div class="info">
8
<h3>Heading here</h3>
9
<p>Description goes here</p>
10
</div></a></div>
11
<!-- end normal -->
12
13
</div>
14
<br>
15
<div class="col-sm-6">
16
17
<!-- colored -->
18
<div class="ih-item square colored effect2"><a href="#">
19
20
<div class="info">
21
<h3>Heading here</h3>
22
<p>Description goes here</p>
23
</div></a></div>
24
<!-- end colored -->
25
26
</div>
27
</div>
ＣＳＳはダウンロードした外部ファイル( https://github.com/gudh/ihover )の中にある 「ihover.css」を読み込む
【 CSS 】
1
hover effect【４】
回転にひねりを加えてテキストを表示
コーディングは、まずhtmlファイルに以下を記述
【 html 】
1
function pagination($pages = '', $range = 4)
2
{
3
$showitems = ($range * 2)+1;
4
5
global $paged;
6
if(empty($paged)) $paged = 1;
7
8
if($pages == '')
9
{
10
global $wp_query;
11
$pages = $wp_query->max_num_pages;
12
if(!$pages)
13
{
14
$pages = 1;
15
}
16
}
17
18
if(1 != $pages)
19
{
20
echo "<div class=\"pagination clearfix\"><span>Page ".$paged." of ".$pages."</span>";
21
if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='"
22
.get_pagenum_link(1)."'>« First</a>";
23
if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)
24
."'>‹ Previous</a>";
25
26
for ($i=1; $i <= $pages; $i++)
27
{
28
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) ||
29
$pages <= $showitems ))
30
{
31
echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='"
ＣＳＳはダウンロードした外部ファイル( https://github.com/gudh/ihover )の中にある 「ihover.css」を読み込む
【 CSS 】
1
hover effect【５】
画像拡大＋テキストスライド表示
コーディングは、まずhtmlファイルに以下を記述
【 html 】
1
<!-- From left and right-->
2
<div class="row">
3
<div class="col-sm-6">
4
5
<!-- normal -->
6
<div class="ih-item square effect6 from_left_and_right"><a href="#">
7
8
<div class="info">
9
<h3>Heading here</h3>
10
<p>Description goes here</p>
11
</div></a></div>
12
<!-- end normal -->
13
14
</div>
15
<br>
16
<div class="col-sm-6">
17
18
<!-- colored -->
19
<div class="ih-item square colored effect6 from_left_and_right"><a href="#">
20
21
<div class="info">
22
<h3>Heading here</h3>
23
<p>Description goes here</p>
24
</div></a></div>
25
<!-- end colored -->
26
27
</div>
28
</div>
29
<!-- end From left and right-->
ＣＳＳはダウンロードした外部ファイル( https://github.com/gudh/ihover )の中にある 「ihover.css」を読み込む
【 CSS 】
1
hover effect【６】
画像拡大＋テキストをズームアップ表示からの配置
コーディングは、まずhtmlファイルに以下を記述
【 html 】
1
<div class="row">
2
<div class="col-sm-6">
3
4
<!-- normal -->
5
<div class="ih-item square effect7"><a href="#">
6
<div class="img"><img src="client/images/assets/rect/2.jpg" alt="img"></div>
7
<div class="info">
8
<h3>Heading here</h3>
9
<p>Description goes here</p>
10
</div></a></div>
11
<!-- end normal -->
12
13
</div>
14
<br>
15
<div class="col-sm-6">
16
17
<!-- colored -->
18
<div class="ih-item square colored effect7"><a href="#">
19
20
<div class="info">
21
<h3>Heading here</h3>
22
<p>Description goes here</p>
23
</div></a></div>
24
<!-- end colored -->
25
26
</div>
27
</div>
ＣＳＳはダウンロードした外部ファイル( https://github.com/gudh/ihover )の中にある 「ihover.css」を読み込む
【 CSS 】
1
関連記事画像ホバー時に効果をつけるtips記事
