目次
例
ブロックのレイアウト
縦積みの下に画像と段落があり、オーバーレイで表示したい部分をグループ化します。
ブロックにCSSを追加
縦積みの高度な設定＞追加CSSクラスに「slidein-bottom」を追加する。
同様にグループの高度な設定＞追加CSSクラスに「overlay」を追加する。
表で示すと以下の通りになります。
| ブロック | 項目 | 設定値 |
|---|---|---|
| 縦積み | 追加CSSクラス | slidein-bottom |
| ＞画像 | ||
| ＞グループ | 追加CSSクラス | overlay |
| ＞＞段落 |
CSSの設定
/* Slide in Overlay from the Bottom */
.slidein-bottom {
position: relative;
width: 100%; /* slidein-bottom width */
/* base image */
.image {
display: block;
width: 100%;
height: auto;
}
/* overlay setting */
.overlay {
position: absolute;
bottom: 0;
right: 0;
background-color: #363b3b;
opacity: 0.8;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
color: white;
}
.text-block {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
opacity: 1;
background-color: #1b1b1b;
}
}
/* hover overlay hight */
.slidein-bottom:hover .overlay {
height: 40%;
}追加情報
オーバーレイの高さを調整するには、.slidein-bottom:hover .overlayのhightの値を変更する
/* hover overlay hight */
.slidein-bottom:hover .overlay {
height: 40%;
}
