【4パターン】カッコいいcaption hover effectを作ってみた!

この記事は3年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

kiso_t130920

こんにちは、Lanです。今回のtipsは【4パターン】カッコいいcaption hover effectを作ってみた!です。
サイト制作時にカッコいいcaption hover effectをすぐに使えるのと、制作の練習もかねて記事にしてみました。

対応ブラウザ

Chrome,Firefox,Opera(一部除き),Safari

実装方法

DEMOページを見ていただくのが一番分かりやすいと思います。
基本構造だけは下記に書いておきますので、参考にお使い下さい。

HTML

<div class=””>
<ul class=””>
<li>
<figure>
<img src=””>
<figcaption>
<h3></h3>
<span></span>
<a href=””>Looking at this</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<!- 続く。。。。。。->
</ul>
</div>

CSS

/* 共通css */
.grid {
padding: 0 20px 30px 20px;
max-width: 1300px;
margin: 0 auto;
list-style: none;
text-align: center;
}

.grid li {
display: inline-block;
width: 200px;
margin: 0;
padding: 20px;
text-align: left;
position: relative;
}

.grid figure {
margin: 0;
position: relative;
}

.grid figure img {
max-width: 100%;
display: block;
position: relative;
}

.grid figcaption {
position: absolute;
top: 0;
left: 0;
padding: 20px;
background: #fff;
font-size: 12px;
}

.grid figcaption h3 {
margin: 0;
padding: 0;
color: #c9c9c9;
}

.grid figcaption a {
text-align: center;
padding: 2px 5px;
border-radius: 2px;
display: inline-block;
background: #c9c9c9;
color: #fff;
}

以上となります。
詳しくは、実装DEMOをご覧下さい。

DEMO

引用先:codrop