WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

CSS3のtrantionでキャプションを表示

f:id:mmmmofu:20160802115616p:plain

http://efu.sakura.ne.jp/web/0825/

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
a {
  text-decoration: none;
  color: #FFF;
}
.box {
  width: 300px;
  height: 300px;
  margin: 150px auto 0;
  background: #06C;
  position: relative;
  overflow: hidden;
}
h3 {
  padding-bottom: 20px;
  color: #FFF;
  font-size: 24px;
}
.view {
  width: 30%;
  margin: 0 auto;
  font-size: 18px;
  color: #FFF;
  padding: 6px;
  border: 1px solid #FFF;
}
.cap {
  padding-top: 170px;
  position: absolute;
  top: 0;
  left: 0;
  width:100%;
  height: 100%;
  text-align: center;
  z-index: 10;
  opacity: 1;
  transition: .4s ease-in-out;
  background: rgba(245,44,67,0);
}

.cap:hover {
  top: -50%;
  left: 0;
  background: rgba(245,44,67,1);
}

</style>
</head>

<body>
<div class="box">
<a href="#">
<div class="cap">
<h3>ページタイトル</h3>
<p class="text">ページの説明文、テキストテキストテキスト</p>
<p class="view">view&nbsp;more</p>
</div>
</a>
</div>
</body>
</html>

.boxをhoverした時にキャプションが下から上に移動する。
.capのpadding-topでキャプションを下に移動させる。
.boxをoverflow: hidden;ではみ出したら見えなくする。
.capにtrantionを設定する。
.cap:hoverをtop:-50%で上に50%移動する。