티스토리, 캡션 꾸미기 for New Editor

 

  

 

Demo

 

 

[Demo] 티스토리, 캡션 꾸미기..

 

 

 

 

 

 

캡션 꾸미기

 

figure.imageblock figcaption {
	font-size: 16px; /* 글씨 크기 */
	font-style: italic; /* 기울기 */
	font-weight: bold; /* 글씨 굵기: normal, bold */
	opacity: 0.7; /* 투명도: 1 = 100% */
	text-align: center; /* 정렬: left, center, right */
	padding: 4px; /* 여백: 상하좌우 동일 값 */
	padding: 4px 8px; /* 여백: 상하: 4px, 좌우:8px */
	padding: 12px 8px 6px 8px; /* 여백: 상 우 하 좌 */
	margin-top: -4px; /* 위쪽 이미지와의 간격 조절 */
	border-left: 1px solid rgba(255, 255, 255, 0.3); /* 캡션에 테두리 두르기 - 좌 */
	border-right: 1px solid rgba(255, 255, 255, 0.3); /* 캡션에 테두리 두르기 - 우 */
	border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* 캡션에 테두리 두르기 - 하 */
}

 

 

 

 

 

 

캡션을 이미지 위로 올리기

 

figure.imageblock figcaption {
	position: relative;
	color: #fff;
	background-color: #000;
	margin-top: -28px
}

figure.imageblock figure {
	opacity: 1;
	transition: 400ms
}

/* 이미지 위에 마우스 올리면 캡션 사라짐 */
figure.imageblock:hover figcaption {
	opacity: 0;
	transition: 400ms
}