webサイト制作の勉強|2018月2月クラスブログ

webサイト制作の勉強に関する解説ブログです。

css3ホバーアニメーション

<li><a href="#">
<div class="cap2">
<h2>タイトル</h2>
<p class="txt">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
<p class="more">詳細</p>
</div>
</a></li>

スタイルシート

li:nth-child(2) {
  background:url(ph01_l.jpg) no-repeat center center/cover;
}
.cap2 {
  width:100%;
  height:100%;
  background:rgba(0,0,0,0);
  transition:0.3s background;
}
.cap2 h2 {
  padding:30px 16px 20px;
  transform:translate(-50%,0);
  transition:0.3s 0.2s;
}
.cap2 .txt {
  padding:0 16px;
  line-height:1.4;
  transform:translate(-150%,0);
  transition:0.3s 0.3s;
}
.cap2 .more {
  border:1px solid #FFF;
  padding:10px;
  width:40%;
  text-align:center;
  margin:26px auto 0;
  transform:translate(-200%,0);
  transition:0.3s 0.3s transform;
}
/*hover時の設定*/
li:nth-child(2):hover .cap2 {
  background:rgba(0,0,0,0.6);
}
li:nth-child(2):hover .cap2 h2 {
  transform:translate(0,0);
}
li:nth-child(2):hover .cap2 .txt {
  transform:translate(0,0);
}
li:nth-child(2):hover .cap2 .more {
  transform:translate(0,0);
}
.cap2 .more:hover {
  background:#FFF;
  color:#333;
}

wsmh.net