読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

CSS3で作るホバーアニメーション(2)

CSS3

キャプションを表示

f:id:web-0818:20170110105346p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>transitonによるアニメーション</title>
<style>
/* reset
------------------------------------*/
html, body, h1, h3, p, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
ul { list-style: none; }
a { text-decoration: none; }
img {
  border: none;
  vertical-align: bottom;
}
html { font-size: 62.5% }

/* layout
------------------------------------*/
ul {
  display: flex;
  width: 960px;
  margin: 50px auto;
} 
.box {
  position:relative;
  overflow: hidden;
  width: 300px;
  height:300px;
  margin: 10px;
}
#box1 {
  background: #FFFFFF url(img/01.jpg) no-repeat;
}
#box2 {
  background: #FFFFFF url(img/11.jpg) no-repeat;
}
#box3 {
  background: #FFFFFF url(img/15.jpg) no-repeat;
}
.caption {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 76px;
  text-align: center;
  z-index: 10;
  background-color: rgba(0,0,0,1);
  cursor: default;
  transition: 0.3s ease ;
}
.box:hover .caption {
  top: 224px;  /* ホバーした際に動く距離 */
  left: 0;
  background-color: rgba(0,0,0,0.8);
}
.caption>h3{
  margin-bottom: 14px;
  padding-top: 16px;
  color: #FFF;
  font-size: 16px;
}
.text { 
  color: #FFF;
  font-size: 14px;
}
</style>
</head>
<body>
<ul class="flex">
<li id="box1" class="box">
<a href="#">
<div class="caption">
<h3>豆乳と白味噌のあったか豚スープ</h3>
<p class="text">鎌倉野菜と塩豚の具だくさん豆乳豚汁</p>
</div><!-- /.caption -->
</a>
</li><!-- /.box -->
<li id="box2" class="box">
<a href="#">
<div class="caption">
<h3>長いもとハムのカラフルピンチョス</h3>
<p class="text">カリカリ、サクサク、シャキッとジューシー</p>
</div><!-- /.caption -->
</a>
</li><!-- /.box -->
<li id="box3" class="box">
<a href="#">
<div class="caption">
<h3>リエット入り真っ赤な玄米クロケット</h3>
<p class="text">ひと口パクリ、ドキッとします</p>
</div><!-- /.caption -->
</a>
</li><!-- /.box -->
</ul>
</body>
</html>

前面に詳細リンクを表示

f:id:web-0818:20170110105404p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>transitonによるアニメーション</title>
<style>
/* reset
------------------------------------*/
html, body, h1, h3, p, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
ul { list-style: none; }
a { text-decoration: none; }
img {
  border: none;
  vertical-align: bottom;
}

ul {
  display: flex;
  width: 960px;
  margin: 50px auto;
} 
.box {
  position:relative;
  overflow: hidden;
  width: 300px;
  height:300px;
  margin: 10px;
}
#box1 {
  background: #FFFFFF url(img/01.jpg) no-repeat;
}
#box2 {
  background: #FFFFFF url(img/11.jpg) no-repeat;
}
#box3 {
  background: #FFFFFF url(img/15.jpg) no-repeat;
}
.caption {
  padding-top: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 10;
  background-color: rgba(255,255,255,0);
  cursor: default;
  transition: 0.3s ease ;
}
.caption:hover {
  top:-70%;  /* ホバーした際に動く距離 */
  left: 0;
  background-color: rgba(0,0,0,0.5);
}
.caption>h3{
  margin-bottom: 14px;
  padding-top: 16px;
  color: #FFF;
  font-size: 16px;
}
.text {
  margin-bottom: 24px;
  color: #FFF;
  font-size: 14px;
}
.more {
  width: 120px;
  margin: 0 auto;
  color: #FFF;
  padding: 10px;
  border: 1px solid #FFF;
}
</style>
</head>
<body>
<ul class="flex">
<li id="box1" class="box">
<a href="#">
<div class="caption">
<h3>豆乳と白味噌のあったか豚スープ</h3>
<p class="text">鎌倉野菜と塩豚の具だくさん豆乳豚汁</p>
<p class="more">詳細</p>
</div><!-- /.caption -->
</a>
</li><!-- /.box -->
<li id="box2" class="box">
<a href="#">
<div class="caption">
<h3>長いもとハムのカラフルピンチョス</h3>
<p class="text">カリカリ、サクサク、シャキッとジューシー</p>
<p class="more">詳細</p>
</div><!-- /.caption -->
</a>
</li><!-- /.box -->
<li id="box3" class="box">
<a href="#">
<div class="caption">
<h3>リエット入り真っ赤な玄米クロケット</h3>
<p class="text">ひと口パクリ、ドキッとします</p>
<p class="more">詳細</p>
</div><!-- /.caption -->
</a>
</li><!-- /.box -->
</ul>
</body>
</html>