文字などのオーバーレイ

オーバーレイする文字

overlay

slidein-bottom


/* 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%;
}
/* hover overlay hight */	    
.slidein-bottom:hover .overlay {
	height: 40%;
}

最近の記事

カテゴリー

カレンダー

2025年2月
 12
3456789
10111213141516
17181920212223
2425262728  

タグクラウド

css gutenberg html JavaScript カスタマイズ カラム テーマ プラグイン ページビルダー

Beabo

コンテンツへスキップ