背景が出現＋テキスト（下から）
マスクの疑似要素beforeに縦横幅100%の背景色を指定し、hoverしたら0.3秒かけてY軸（縦軸）の下から上に向けて透過0→出現。
画像の天地中央位置にいるテキストがhoverをしたら0.5秒かけて透過0→出現。
See the Pen 背景が出現＋テキスト（下から） by Toru Katsumata (@Toru-Katsumata) on CodePen.
背景が出現＋テキスト（上から）
「背景が出現＋テキスト（下から）」の背景の位置を変更する。
.bgDU span.mask::before{
/*以下のプロパティ値のみ変更する*/
transform: translateY(-100%);
}背景が出現＋テキスト（左から）
「背景が出現＋テキスト（下から）」の背景の位置を変更する。
/*以下のプロパティ値のみ変更する*/
.bgDU span.mask::before{
transform: translateX(-100%);
}
.bgDU:hover span.mask::before{
transform: translateX(0);
}背景が出現＋テキスト（右から）
「背景が出現＋テキスト（下から）」の背景の位置を変更する。
/*以下のプロパティ値のみ変更する*/
.bgDU span.mask::before{
transform: translateX(100%);
}
.bgDU:hover span.mask::before{
transform: translateX(0);
}背景が出現＋テキスト（中央から横に）
「背景が出現＋テキスト（下から）」の背景の位置と広がり具合を変更する。
/*以下のプロパティ値のみ変更する*/
.bgDU span.mask::before{
transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
transform: scale(0, 1);
transform-origin: center;
}
/*hoverした時の変化*/
.bgDU span.mask:hover::before{ /*指定箇所変更*/
transform: scale(1, 1);
}背景が出現＋テキスト（中央から縦に）
「背景が出現＋テキスト（中央から横に）」の背景の位置を変更する。
/*以下のプロパティ値のみ変更する*/
.bgDU span.mask::before{
transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
transform: scale(1, 0);
transform-origin: center;
}
/*hoverした時の変化*/
.bgDU span.mask:hover::before{ /*指定箇所変更*/
transform: scale(1, 1);
}回転＋テキスト（X軸）
背景色がついた画像と同じ大きさのテキストのエリアが、hoverをすると0.35秒かけてX軸（縦軸）に回転しながら透過0→出現。
hoverをすると画像がX軸（縦軸）に回転し、透過0になる。
See the Pen 画像回転＋テキスト（X 軸） by Toru Katsumata (@Toru-Katsumata) on CodePen.
回転＋テキスト（Y軸）
「回転＋テキスト（X軸）」の回転方向を変更する。
/*以下のプロパティ値のみ変更する*/
.flipX a:hover img{
transform: rotateY(-180deg); /*横軸に回転*/
}
.flipX span.cap{
transform: rotateY(90deg); /*横軸に回転*/
transform-origin: 50% 0%; /*回転する基点*/
}
/*hoverした時の変化*/
.flipX a:hover span.cap{
transform: rotateY(0);
}回転＋テキスト（Z軸）
「回転＋テキスト（X軸）」の回転方向を変更する。
/*以下のプロパティ値のみ変更する*/
.flipX a:hover img{
transform: rotate3d(-1, 1, 0, 100deg); /*奥行きをもたせて回転*/
}
.flipX span.cap{
transform: rotate3d(1, -1, 0, 100deg); /*奥行きをもたせて回転*/
/*X、Y軸で使用したtransform-originは削除*/
}
/*hoverした時の変化*/
.flipX a:hover span.cap{
transform: rotate3d(0, 0, 0, 0deg); /*奥行きをもたせて回転*/
}回転＋テキスト（Z軸2）
「回転＋テキスト（X軸）」の回転方向を変更する。
/*以下のプロパティ値のみ変更する*/
.flipX a:hover img{
transform: rotate3d(-1, -1, 0, 100deg); /*奥行きをもたせて回転*/
}
.flipX span.cap{
transform: rotate3d(1, 1, 0, 100deg); /*奥行きをもたせて回転*/
/*X、Y軸で使用したtransform-originは削除*/
}
/*hoverした時の変化*/
.flipX a:hover span.cap{
transform: rotate3d(0, 0, 0, 0deg); /*奥行きをもたせて回転*/
}画像拡大（ぼかし）＋テキスト
拡大+ぼかした時にはみ出す画像を隠すマスクをつくり、CSSのoverflow:hidden;で隠す。
hoverをしたら0.3秒かけて上下左右に余白をとった背景色が出現。
CSSのscaleとblurを使い、hoverをしたら画像を0.3秒かけて拡大＋ぼかす。
画像の天地中央位置にいるテキストがhoverしたら0.5秒かけて透過0→出現。
See the Pen 画像拡大（ぼかし）＋テキスト by Toru Katsumata (@Toru-Katsumata) on CodePen.
画像縮小（ぼかし）＋テキスト
「画像拡大（ぼかし）＋テキスト」の画像を縮小させる。
/*以下のプロパティ値のみ変更する*/
.zoomInText img{
transform: scale(1.2);
}
.zoomInText:hover img{
transform: scale(1); /*縮小の値を変更したい場合はこの数値を変更*/
}画像透過+グラデーション＋テキスト
マスクの疑似要素beforeに縦横幅100%の背景色（グラデーション）を指定しhoverしたら0.3秒かけて出現。
CSSのopacityを使い、hoverをしたら画像を0.3秒かけて透過させる。
画像の天地中央位置にいるテキストがhoverをしたら0.5秒かけて透過0→出現。
See the Pen 画像透過+ グラデーション＋テキスト by Toru Katsumata (@Toru-Katsumata) on CodePen.
枠線＋テキスト
マスクの疑似要素before、afterそれぞれに線を指定してhoverをしたら0.3秒かけて透過0→線が伸びる。
画像の天地中央位置にいるテキストがhoverをしたら0.5秒かけて透過0→出現。
See the Pen 画像に枠線＋テキスト by Toru Katsumata (@Toru-Katsumata) on CodePen.
