편집 요약 없음 |
편집 요약 없음 |
||
| 30번째 줄: | 30번째 줄: | ||
.IM_POG-Section2 { | .IM_POG-Section2 { | ||
background: rgba(40,0,0,0); | |||
box-shadow: 0px 0px 15px 20px rgba(40,0,0,0); | |||
transition: background 1s, box-shadow 1s; | |||
} | } | ||
.IM_POG-Section2a { | .IM_POG-Section2a { | ||
| 50번째 줄: | 53번째 줄: | ||
height:max-content; | height:max-content; | ||
opacity:1; | opacity:1; | ||
} | |||
.IM_POG-Section2:hover { | |||
background: rgba(40,0,0,0.5); | |||
box-shadow: 0px 0px 15px 20px rgba(40,0,0,1), 0px 0px 15px 20px rgba(40,0,0,1); | |||
} | } | ||
2023년 9월 23일 (토) 11:20 판
.IM_POG-Section1 {
background: rgba(40,40,0,0);
box-shadow: 0px 0px 15px 20px rgba(40,40,0,0);
transition: background 1s, box-shadow 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);
box-shadow: 0px 0px 15px 20px rgba(40,40,0,1), 0px 0px 15px 20px rgba(40,40,0,1);
}
.IM_POG-Section2 {
background: rgba(40,0,0,0);
box-shadow: 0px 0px 15px 20px rgba(40,0,0,0);
transition: background 1s, box-shadow 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);
box-shadow: 0px 0px 15px 20px rgba(40,0,0,1), 0px 0px 15px 20px rgba(40,0,0,1);
}
.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.8) blur(4px) opacity(15%) grayscale(100%);;
transition: filter 0.5s;
}
.IM_POG-MTI:hover {
filter:brightness(1.0) blur(2px) opacity(100%) grayscale(0%);;
}
.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%);
}