See the Pen css sample item-list by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.
以上のサンプルはhover時の表示に擬似要素（:after）を使っています。このCSSについて分解して紹介します。
コードのサンプルというよりCSS装飾の考え方の参考になれば。
概要
CSSでやることを言葉でざっと分解すると以下になります。
-
a:afterを半透明フィルムのようにa全体を覆うようにする -
a:afterに Fontawesome のアイコンを出す -
a:afterは平時は透明にする （opacity:0） -
a:hoverでa:afterを表示させる （opacity:1）
※完成像が頭の中に（or絵として）あったうえで、こんな風にすれば出来るやろ！という手順をイメージします。
CSS
サンプルから抜粋して紹介します。 HTMLはシンプルなので Codepen を参照してください。
.item-list a {
display: block;
position: relative;
color: #000;
width: 200px;
height: 200px;
overflow: hidden;
}
上記は a タグへのCSS。ブロック化してサイズ固定しているのみですが、注意すべき点は position:relative をかけているところ。 これは a タグの範囲内で a:after を position:absolute で制御するための下準備です。 この辺りは absolute 操作に慣れている人であれば定石だと思います。
次に本題の a:after へのCSSです。
.item-list a:after {
/* 概要1にあたる */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
/* 概要2にあたる */
font-family: FontAwesome;
font-size: 32px;
content: "\f002";
color: #fff;
display: flex;
align-items: center;
justify-content: space-around;
/* 概要3にあたる */
opacity: 0;
box-shadow: inset 0 0 30px 15px rgba(0, 0, 0, 0.3);
transition: all .5s ease;
}
冒頭の概要にあたる部分ごとに分解します。
概要1にあたるCSS
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
position:absolute をかけ a タグの中いっぱいに広げ、黒い半透明の背景を指定しています。
半透明にしたい時 opacity を使うケースもありますが、背景色だけ半透明にする場合は background:rgba() を推奨します。 opacity では要素自体が半透明になるので、中のフォントなども影響を受けるためです。
概要2にあたるCSS
font-family: FontAwesome;
font-size: 32px;
content: "\f002";
color: #fff;
display: flex;
align-items: center;
justify-content: space-around;
フォントにFontAwesomeを指定した後、content: "\f002" で虫めがねに当たるアイコンを指定しています。 display:flex 以後については、アイコンを要素のど真ん中に配置するためのスタイルです。
概要3にあたるCSS
opacity: 0;
box-shadow: inset 0 0 30px 15px rgba(0, 0, 0, 0.3);
transition: all .5s ease;
opacity:0 を指定することで平時は透明にしています。
要素を消すなら display:none の方が確実ですが、transition を使いアニメーションさせたかったので opacity を使っています。 CSSアニメーションは数値化できるものしかアニメーションできず、 display:block と display:none の切り替えではアニメーションができないためです。
box-shadow は飾りのビネット表現のため、 transition はhover時にフワッとアニメーションさせるため指定しています。
概要4にあたるCSS
a:hover した時の a:after のCSSです。
.item-list a:hover:after {
opacity: 1;
}
「a:hover時のa:after」という指定は a:hover:after と連結して指定できます。
opacity:1 にするのみで終了です。