틀:POgroup/styles.css

2023년 9월 23일 (토) 10:52 판 (원본 보기) Ernst (토론 | 기여) 편집 요약 없음 태그: 되돌려진 기여 ← 이전 편집		2023년 9월 24일 (일) 09:20 기준 최신판 (원본 보기) Ernst (토론 | 기여) 편집 요약 없음
(같은 사용자의 중간 판 29개는 보이지 않습니다)
1번째 줄:		1번째 줄:
	.IM_POG-Section1 {		.IM_POG-Section1 {
			background: rgba(40,40,0,0);
			transition: background 1s;
	}		}
	.IM_POG-Section1a {		.IM_POG-Section1a {
	width:100%;		width:calc(100% - 100px);
	transition: width 1s;		transition: width 1s;
	}		}
	.IM_POG-Section1b {		.IM_POG-Section1b {
			display:inline-block;
	overflow:hidden;		overflow:hidden;
	width:0%;		width:0%;
	height:0px;		height:0px;
	opacity:0;		opacity:0;
			transition:opacity 1s, width 1s, height 1s;
	}		}
	.IM_POG-Section1:hover > .IM_POG-Section1a {		.IM_POG-Section1:hover > .IM_POG-Section1a {
15번째 줄:		19번째 줄:
	}		}
	.IM_POG-Section1:hover > .IM_POG-Section1b {		.IM_POG-Section1:hover > .IM_POG-Section1b {
	animation: IM_POG-Section;		width:45%;
	animation-iteration-count: 1;		height:max-content;
	animation-duration: 1s;		opacity:1;
	animation-fill-mode: forwards;
	}		}
	@keyframes IM_POG-Section {		.IM_POG-Section1:hover {
	0% {display:none; width:0%; height:0px; opacity:0;}		background: rgba(40,40,0,0.5);
	50% {display:inline-block; width:0%; height:0px; opacity:0;}
	100% {display:inline-block; width:45%; height:max-content; opacity:1;}
	}		}
			.IM_POG-Section2 {
			background: rgba(40,0,0,0);
			transition: background 1s;
			}
			.IM_POG-Section2a {
			width:calc(100% - 100px);
			transition: width 1s;
			}
			.IM_POG-Section2b {
			display:inline-block;
			overflow:hidden;
			width:0%;
			height:0px;
			opacity:0;
			transition:opacity 1s, width 1s, height 1s;
			}
			.IM_POG-Section2:hover > .IM_POG-Section2a {
			width:calc(45% - 100px);
			}
			.IM_POG-Section2:hover > .IM_POG-Section2b {
			width:45%;
			height:max-content;
			opacity:1;
			}
			.IM_POG-Section2:hover {
			background: rgba(40,0,0,0.5);
			}
			.IM_POG-Section3 {
			background: rgba(0,23,40,0);
			transition: background 1s;
			}
			.IM_POG-Section3a {
			width:calc(100% - 100px);
			transition: width 1s;
			}
			.IM_POG-Section3b {
			display:inline-block;
			overflow:hidden;
			width:0%;
			height:0px;
			opacity:0;
			transition:opacity 1s, width 1s, height 1s;
			}
			.IM_POG-Section3:hover > .IM_POG-Section3a {
			width:calc(45% - 100px);
			}
			.IM_POG-Section3:hover > .IM_POG-Section3b {
			width:45%;
			height:max-content;
			opacity:1;
			}
			.IM_POG-Section3:hover {
			background: rgba(0,23,40,0.5);
			}
	.IM_POG-MTI1 {		.IM_POG-MTI1 {
55번째 줄:		115번째 줄:
	.IM_POG-MTI {		.IM_POG-MTI {
	filter:brightness(0.8) blur(4px) opacity(15%) grayscale(100%);;		filter:brightness(0.5) blur(3px) opacity(15%) grayscale(100%);
	transition: filter 0.5s;		border:none;
			z-index:2;
			box-shadow:0px 0px 5px 2px rgba(0,0,0,0);
			transition: filter 0.5s, box-shadow 1s;
	}		}
	.IM_POG-MTI:hover {		.IM_POG-MTI:hover {
	filter:brightness(1.0) blur(2px) opacity(100%) grayscale(0%);;		filter:brightness(0.8) blur(0px) opacity(100%) grayscale(50%);
			z-index:3;
			box-shadow:0px 0px 8px 4px rgba(0,0,0,0.5);
	}		}

---

2023년 9월 24일 (일) 09:20 기준 최신판

.IM_POG-Section1 {
    background: rgba(40,40,0,0);
	transition: background 1s;
}
.IM_POG-Section1a {
    width:calc(100% - 100px);
	transition: width 1s;
}
.IM_POG-Section1b {
    display:inline-block;
    overflow:hidden;
    width:0%;
    height:0px;
    opacity:0;
	transition:opacity 1s, width 1s, height 1s;
}
.IM_POG-Section1:hover > .IM_POG-Section1a {
    width:calc(45% - 100px);
}
.IM_POG-Section1:hover > .IM_POG-Section1b {
    width:45%;
    height:max-content;
    opacity:1;
}
.IM_POG-Section1:hover {
    background: rgba(40,40,0,0.5);
}

.IM_POG-Section2 {
    background: rgba(40,0,0,0);
	transition: background 1s;
}
.IM_POG-Section2a {
    width:calc(100% - 100px);
	transition: width 1s;
}
.IM_POG-Section2b {
    display:inline-block;
    overflow:hidden;
    width:0%;
    height:0px;
    opacity:0;
	transition:opacity 1s, width 1s, height 1s;
}
.IM_POG-Section2:hover > .IM_POG-Section2a {
    width:calc(45% - 100px);
}
.IM_POG-Section2:hover > .IM_POG-Section2b {
    width:45%;
    height:max-content;
    opacity:1;
}
.IM_POG-Section2:hover {
    background: rgba(40,0,0,0.5);
}

.IM_POG-Section3 {
    background: rgba(0,23,40,0);
	transition: background 1s;
}
.IM_POG-Section3a {
    width:calc(100% - 100px);
	transition: width 1s;
}
.IM_POG-Section3b {
    display:inline-block;
    overflow:hidden;
    width:0%;
    height:0px;
    opacity:0;
	transition:opacity 1s, width 1s, height 1s;
}
.IM_POG-Section3:hover > .IM_POG-Section3a {
    width:calc(45% - 100px);
}
.IM_POG-Section3:hover > .IM_POG-Section3b {
    width:45%;
    height:max-content;
    opacity:1;
}
.IM_POG-Section3:hover {
    background: rgba(0,23,40,0.5);
}




.IM_POG-MTI1 {
    position: relative;
    overflow:hidden;
	width:50%;
    margin-right:0%;
    z-index:3;
	transition: width 1s, margin 1s;
}
.IM_POG-MTI1:hover {
    overflow:hidden;
	width:100%;
    margin-right:-50%;
}
.IM_POG-MTI2 {
    position: relative;
    overflow:hidden;
	width:50%;
    margin-right:0%;
    z-index:2;
	transition: width 1s, margin 1s, z-index 1s;
}
.IM_POG-MTI2:hover {
    overflow:hidden;
	width:100%;
    margin-left:-50%;
    z-index:5;
}

.IM_POG-MTI {
    filter:brightness(0.5) blur(3px) opacity(15%) grayscale(100%);
    border:none;
    z-index:2;
    box-shadow:0px 0px 5px 2px rgba(0,0,0,0);
    transition: filter 0.5s, box-shadow 1s;
}
.IM_POG-MTI:hover {
    filter:brightness(0.8) blur(0px) opacity(100%) grayscale(50%);
    z-index:3;
    box-shadow:0px 0px 8px 4px rgba(0,0,0,0.5);
}

.IM_POG-MT1 {
	background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 1px, rgba(0, 0, 0, 0.1) 4px, rgba(0, 0, 0, 0.15) 10px, rgba(0, 0, 0, 0.05) 12px), linear-gradient(to bottom, rgba(55, 55, 55, 0.1) 8%, rgba(0, 5, 5, 0.15) 11%, rgba(5, 20, 55, 0.1) 13%, rgba(55, 55, 55, 0.1) 20%, rgba(55, 55, 55, 0.1) 60%,  rgba(55, 55, 55, 0.15) 70%, rgba(20, 20, 20, 0.15) 72%, rgba(20, 20, 20, 0.15) 73%, rgba(55, 55, 55, 0.15) 75%, rgba(55, 55, 55, 0.1) 85%, rgba(10, 10, 10, 0.1) 88%, rgba(10, 10, 10, 0.1) 95%, rgba(55, 55, 55, 0.1) 95%), linear-gradient(to right, rgba(40,40,0,1) 5%, rgba(40,40,0,0) 95%), linear-gradient(to right, #282828 0%, #282828 100%);
	transition: background 2s;
}
.IM_POG-MT2 {
	background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 1px, rgba(0, 0, 0, 0.1) 4px, rgba(0, 0, 0, 0.15) 10px, rgba(0, 0, 0, 0.05) 12px), linear-gradient(to bottom, rgba(55, 55, 55, 0.1) 8%, rgba(0, 5, 5, 0.15) 11%, rgba(5, 20, 55, 0.1) 13%, rgba(55, 55, 55, 0.1) 20%, rgba(55, 55, 55, 0.1) 60%,  rgba(55, 55, 55, 0.15) 70%, rgba(20, 20, 20, 0.15) 72%, rgba(20, 20, 20, 0.15) 73%, rgba(55, 55, 55, 0.15) 75%, rgba(55, 55, 55, 0.1) 85%, rgba(10, 10, 10, 0.1) 88%, rgba(10, 10, 10, 0.1) 95%, rgba(55, 55, 55, 0.1) 95%), linear-gradient(to left, rgba(40,0,0,1) 5%, rgba(40,0,0,0) 95%), linear-gradient(to right, #282828 0%, #282828 100%);
	transition: background 2s;
}
.IM_POG-MT1:hover {
	background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 1px, rgba(0, 0, 0, 0.1) 4px, rgba(0, 0, 0, 0.15) 10px, rgba(0, 0, 0, 0.05) 12px), linear-gradient(to bottom, rgba(55, 55, 55, 0.1) 8%, rgba(0, 5, 5, 0.15) 11%, rgba(5, 20, 55, 0.1) 13%, rgba(55, 55, 55, 0.1) 20%, rgba(55, 55, 55, 0.1) 60%,  rgba(55, 55, 55, 0.15) 70%, rgba(20, 20, 20, 0.15) 72%, rgba(20, 20, 20, 0.15) 73%, rgba(55, 55, 55, 0.15) 75%, rgba(55, 55, 55, 0.1) 85%, rgba(10, 10, 10, 0.1) 88%, rgba(10, 10, 10, 0.1) 95%, rgba(55, 55, 55, 0.1) 95%), linear-gradient(to right, rgba(40,40,0,1) 80%, rgba(40,40,0,0.7) 100%), linear-gradient(to right, #282828 0%, #282828 100%);
}
.IM_POG-MT1:hover ~ .IM_POG-MT2 {
	background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 1px, rgba(0, 0, 0, 0.1) 4px, rgba(0, 0, 0, 0.15) 10px, rgba(0, 0, 0, 0.05) 12px), linear-gradient(to bottom, rgba(55, 55, 55, 0.1) 8%, rgba(0, 5, 5, 0.15) 11%, rgba(5, 20, 55, 0.1) 13%, rgba(55, 55, 55, 0.1) 20%, rgba(55, 55, 55, 0.1) 60%,  rgba(55, 55, 55, 0.15) 70%, rgba(20, 20, 20, 0.15) 72%, rgba(20, 20, 20, 0.15) 73%, rgba(55, 55, 55, 0.15) 75%, rgba(55, 55, 55, 0.1) 85%, rgba(10, 10, 10, 0.1) 88%, rgba(10, 10, 10, 0.1) 95%, rgba(55, 55, 55, 0.1) 95%), linear-gradient(to right, rgba(40,40,0,0.7) 0%, rgba(40,0,0,0) 50%), linear-gradient(to right, #282828 0%, #282828 100%);
}