麺道

2016.12.11

CSSのみで実装するホバーエフェクト①

css3になって面倒なjsファイルを読みこませる事がなくなってきた。

html+cssだけで簡単にできるエフェクトを紹介します。

このサイトでも使ってます。

 

◆HTML

<figure>
 <a href="リンク先">
  <img src="画像のURL">
  <figcaption>
   <h3>タイトル</h3>
  </figcaption>
 </a>
</figure>

 

◆CSS

figure{
position: relative;
display:inline-block;
width:200px;
height:200px;
overflow:hidden;
margin:0px 10px 20px;
}
figure img{
position: relative;
top: 50%;
left: 50%;
width: auto;
height: auto;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
figcaption{
position: absolute;
bottom: 0%;
left: 0;
z-index: 0;
width:100%;
height:0px;
-webkit-transition:.5s linear;
transition:.5s linear;
opacity: 0;
background:rgba(255,255,255,0.7);
}
figcaption h3{
text-align:center;
padding:0px 10px;
margin:30px 0px 0;
color:#333;
}
figure:hover figcaption{
height:200px;
opacity: 1;
z-index:50;
}

Top